Material-ui: Mobile Keyboard moves Dialog

[ulrichSchreiner]

hi,

showing a dialog with form content shows a virtual keyboard on mobile devices when a form control (textfield) is activated. as a consequence my dialog shrinks to a very small size. the first problem here is, that the textfield with the focus (which i want to enter) is now cut-off and invisible. i have to scroll to see it.

the second problem is: when i click the keyboard "away" the dialog will grow, but it's position is now "too deep" and a part of the dialog is cut off by the bottom of the display.

• do i have any chance to show (=scroll to visible) the current focused element when the keyboard is shown?
• any chances to set the dialog to correct position after keyboard disappears?

/usc

[khurana3192]

Facing exactly the same issue...did you find any solution for this?

[ulrichSchreiner]

no

[hashwin]

Why was this closed? Is there a solution to this?

[ofirattia]

Any updates?

[johndturn]

I'd also like to throw in my support for a fix for this. Why was it closed?

[ramprasadgs]

Any Update or suggestion ?

[johanalkstal]

Experiencing this issue as well.

Any suggestions to the cause of it and to work around it would be much appreciated.

[oswaldjaroslav]

Just stumbled into the same problem. Any solution?

[balazsorban44]

Have the same problem.

[kevteg]

Having this issue

[pietra]

Having this problem. Any solution or suggestion?

[mbrookes]

This issue is resolved with v1-beta, which is why the issue was closed. (We are focused on v1, so closing v0 issues where the problem is addressed by v1).

Anyone is welcome to submit a PR to fix v0. "+1" stlye comments aren't so helpful.

[mbrookes]

@pietrasofia I thought I saw you posted some helpful screenshots earler showing the problem you're facing with v1, but now I can't see them. Could you link to the issue you posted in, or open a new issue for v1? Thanks!

[pietra]

Hi, @mbrookes! Yes, I posted earlier some screenshots showing the problem, but then I realize that it could be because TextFields were from v0, just the Dialog was from v1. However, after switch TextFields to v1, the problem persisted. So, I will open a new issue for v1 on monday. Thanks!

[mbrookes]

Actually, no need - I've been able to reproduce your issue in the v1 docs Form Dialog demo:

https://material-ui-next.com/demos/dialogs/#form-dialogs

However I don't believe it's a Material-UI issue as such. When a container with overflow: scroll resizes, the browser keeps the top of the content at the top container. Just try resizing a desktop browser to see it in action.

I don't beieve there's any native browser magic to keep a focused input visible on window resize. You could try something like react-scroll to scroll to the input in response to it being focused.

[pietra]

Huuuum, makes sense,

I'll take a look in react-scroll as you said, and try to fix it.

Thanks a lot for your help!!

[pietra]

If any one still needs a suggestion, for sure, there are better ways to solve this, but worked for me.

I combined resize event of the window with scrollIntoView function. Then, when user selects a TextField (or any field that will open keyboard), the resize event will be called and I can scroll to turn the selected field visible.

Resize
https://developer.mozilla.org/pt-BR/docs/Web/Events/resize

ScrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

[RichardLanham]

Try adding "maximum-scale=1" to the meta viewport tag