Can't write in direct link input

Questions / Help
,
1

Hi,
I am trying to open the widget to upload files, one the options i want to use is direct link.
It works in most places in my web application but there is one place i can’t write inside the input as if it’s disabled. The only difference i can think about is the fact the widget is being opened from another react modal.
But i can’t see anything that disables the input

Screen Shot 2020-05-31 at 15.34.06
Screen Shot 2020-05-31 at 15.34.061736×759 137 KB

this is how it looks when it works
Screen Shot 2020-05-31 at 15.44.22
Screen Shot 2020-05-31 at 15.44.221734×767 137 KB

2

Hi @ops,

Thanks for the question. That looks a bit weird at first sight. That would be very helpful if you could share more details on how you open the widget from a React modal or set up a sandbox with your code so that we can check it live.

@nd0ut do you have any idea why the input gets disabled?

3

hi,
i managed to reproduce it , i couldn’t make the settings in the index.html work
so i added data-public-key=“demopublickey” to the input
in reality we use the config i put under the script in the html

when you click choose a file on the screen the direct link works
when you enter the dialog and choose a file the direct link is not editable

4

Hey,

The problem is that the mui modal steals focus. There are plenty of such issues on mui github, like [Modal] Cannot focus other parts of the app when open · Issue #17497 · mui-org/material-ui · GitHub

The good news is that it’s possible to disable this feature. You just need to setup property disableEnforceFocus: true in your theme object.

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  props: {
    MuiModal: {
      disableEnforceFocus: true
    }
  }
});
<ThemeProvider theme={theme}>
...
</ThemeProvider>
1 Like
5

I disabled it for the specific modal instead of the whole theme but your solution works
Thank you!

1 Like