React/Material-ui : Make dialog not change when mobile keyboard is brought up

Question

I have a dialog that contains a few text fields where the user can provide input, like this.

The problem im having is that whenever the user clicks on one of the textfields , the mobile keyboard messes everything up. It looks like this:

I want to have the dialog remain the same - as in, it shouldnt shrink and force the user to scroll down to see the full dialog. I tried using the FullscreenDialog-component, but the problem remains the same - the mobile keyboard just shrinks it and makes it scrollable for some reason. Is there any way to fix this?

EDIT I found a way to sort-of fix this, at least temporarily - add a minHeight to the bodyStyle in the dialog and the keyboard won't overwrite it. Obviously you have to move the dialog up so that the keyboard doesn't block it when it appears :)

Answer 1

I've experienced a similar problem but the solution may not help in every situation.

In my case, the main <Paper /> component height was set to window.innerHeight and another <Paper /> component inside it was set to about window.innerHeight * 0.6. I use this and not simply a CSS unit 'vh' since it compensates for the URL bar.

In the nested paper, I had a <TextField /> and the same problem you described occurred. The solution is basically to listen to onresize event since it fires when the keyboard opens, then you simply use the maxheight of all those measures.

To make it perfect you may want to respect device rotation since it really does require you to use the new height, and of course make sure the component is positioned correctly.