tmegos blog

Web developer

Material UIにてダイアログ内の入力欄がソフトウェアキーボードに隠れる問題を解決するための1つの方法

Material UI React iOS

現象

  • Material UIでダイアログ内にautoFocusを有効にした入力欄がある場合、iOSで入力欄がソフトウェアキーボードに隠れる

f:id:tmegos:20200510094852p:plain:w300

github.com

対策

ダイアログのtransitionを無効にすると、ソフトウェアキーボードが出たタイミングでスクロールされて入力欄が隠れなくなります
ex: transitionDuration={{ enter: 0 }}

既知の問題

  • ダイアログを開いた後、bodyがスクロールされたままになる

考察

  • iOSではマウント時にfocusが当たっていればソフトウェアキーボードが出てくれる様子
    これは、autoFocus、elm.focus()どちらも同じ
  • ダイアログの表示にdurationが入っていると、マウントと表示されるタイミングが異なるため、focusは当たるもののソフトウェアキーボードが出てくれなかった？
  • ダイアログ表示のdurationを0にすることでソフトウェアキーボードが出てくれるようになった

サンプルコード

「HIDE INPUT」のダイアログは通常のダイアログ（ソフトウェアキーボードで隠れる）
「SHOW INPUT」のダイアログは transitionDuration={{ enter: 0 }} で表示するときのtransitionを無効にしています

通常 transitionなし
f:id:tmegos:20200510094852p:plain:w300 f:id:tmegos:20200510094929p:plain:w300