React / Material-ui：移动键盘启动时不改变对话框

Question

我有一个对话框，其中包含一些用户可以提供输入的文本字段，如下所示。

我遇到的问题是，每当用户点击其中一个文本字段时，移动键盘就会混乱。它看起来像这样：

我希望对话框保持不变 - 就像在，它不应缩小并强制用户向下滚动以查看完整对话框。我尝试使用FullscreenDialog组件，但问题仍然是相同的 - 移动键盘只是收缩它并使其可滚动由于某种原因。有什么方法可以解决这个问题吗？

编辑我找到了一种方法来解决这个问题，至少是暂时的 - 在对话框中为bodyStyle添加一个minHeight，键盘不会覆盖它。显然你必须向上移动对话框，以便键盘出现时不会阻止它：）

Answer 1

我遇到了类似的问题，但是解决方案可能无法在每种情况下都有用。

在我的情况下，主要<Paper />组件的高度设置为window.innerHeight，内部的另一个<Paper />组件的高度设置为window.innerHeight * 0.6。我使用它，而不仅仅是CSS单元“ vh”，因为它可以补偿网址栏。

在嵌套纸中，我有一个<TextField />，并且发生了您描述的相同问题。解决方案基本上是监听onresize事件，因为它会在键盘打开时触发，然后您只需使用所有这些度量的最大高度即可。

要使其完美，您可能需要考虑设备的旋转，因为它确实需要您使用新的高度，并且当然要确保组件的位置正确。