React.jsでconfirmダイアログを使った時のスマホブラウザ間での動作の違いについて

	class ImputSomethingWithConfirm extends React.Component {
		constructor(props) {
    			super(props);
    			this.state = {
      				input_state:false
    			};
  		}
		
		onfocus(e){
			let result = confirm(`変更しようとしています。
よろしければ「OK」を押してください。
変更を意図していない場合(間違いの場合)
「キャンセル」→「完了」を押してください。`);
			if( result ) {
    				this.setState({input_state:true});
			}
			else {
    				this.setState({input_state:false});
 			}
		}

		onblur(e){
			this.setState({input_state:false});
		}
		
		render(){
			
			return (      
				<div>
				{this.state.input_state ?
					<div>
						<p className="input_label">{this.props.name_of_button}(入力OK)</p>:<input type="text" className="input" name={this.props.nog} onChange={this.props.onClick} onBlur={(e)=>this.onblur(e)}/><p className="input_label">{this.props.name_of_unit}</p>
					</div>
					:
					<div>
						<p className="input_label">{this.props.name_of_button}(入力NG)</p>:<input type="text" className="input" name={this.props.nog} onChange={this.props.onClick} onFocus={(e)=>this.onfocus(e)}/><p className="input_label">{this.props.name_of_unit}</p>
					</div>

				}
				</div>

			)
		}

	}

React.jsで入力ボックスコンポーネントなんですが、onFocus時にconfirm関数で、入力値を変更しようとしていることをユーザに知らせる(確認を促す)ものを作りたいです。
とりあえず作ってみたのが↑です。

最初はstate.input_stateがfalseなのでonFocus時にconfirm関数により注意ダイアログが出る入力ボックス(入力NGの方)を表示。ダイアログでOKを押すとstate.input_stateがtrueにセットされ、ダイアログが出ない(入力可能な)入力ボックス(入力OKの方)が表示される。
入力後onBlur時にstate.input_stateをfalseにして、次のonFocus時には注意ダイアログが出るようにする。

という感じです。これでスマホのchromeだとおおむね期待通りの動きなのですが、safariで動かしてみると、
入力しようとする(onFocus)→ダイアログ出現→ダイアログで「OK」を押す→ダイアログ消える、しかし表示されるのは注意ダイアログが出る入力ボックス(入力NGの方)→入力しようとする→ダイアログ出現→以下ループ

となり、いつまでたっても入力できません。

原因がわかりません。当たり前なのだと思いますが、簡単なコードで、safariでもconfirmのダイアログでOKを押したらtrueが返されるのは確認しました。

あとブラウザの仕様が原因、ということだとconfirmを使わない別の方法を考える、ということになるでしょうか？何かこういう感じの既成コンポーネントとかありますでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

create-react-app でアプリを作成し、ご質問に挙げられている ImputSomethingWithConfirm をそのままコピペしてマウントさせると、確かにご質問にあるような（悩ましい）状況を再現できました。
（ちなみに、スマホのブラウザを使わなくても、PCのChromeで確認できました）

原因は、confirmダイアログのOKボタンまたはキャンセルボタンをクリック（タップ）してダイアログが消えるときにも、focusイベントや blur イベントが発生していることと考えられます。

そのため、confirmダイアログが表示されている間は、onfocus と onblur を無効にして、confirmダイアログが消えた後に有効にするといったような処理が必要ですが、confirm ダイアログが表示されている、または消えているという2状態と完全に同期したフラグを this.state の中に持たせることは困難なので、苦肉の策が必要と思います。

一例として、以下のように修正してみました。

jsx
1import React from 'react';
2
3class ImputSomethingWithConfirm extends React.Component {
4  constructor(props) {
5    super(props);
6    this.state = {
7      input_state:false
8    };
9    this.onblur = this.onBlurCallback;
10    this.onfocus = this.onFocusCallback;
11  }
12
13  afterConfirm() {
14    setTimeout(() => {
15      this.onblur = this.onBlurCallback;
16      this.onfocus = this.onFocusCallback;
17    }, 300);
18  }
19
20  onFocusCallback(e){
21    this.onblur = () => {};
22    this.onfocus = () => {};
23    let result = window.confirm(`変更しようとしています。
24よろしければ「OK」を押してください。
25変更を意図していない場合(間違いの場合)
26「キャンセル」→「完了」を押してください。`);
27    if( result ) {
28      this.setState({input_state:true});
29    }
30    else {
31      this.setState({input_state:false});
32      e.target.blur();
33    }
34    this.afterConfirm();
35  }
36
37  onBlurCallback(e){
38    this.setState({input_state:false});
39  }
40
41  render(){
42
43    return (
44      <div>
45        {this.state.input_state ?
46          <div>
47            <p className="input_label">{this.props.name_of_button}(入力OK)</p>:<input type="text" className="input" name={this.props.nog} onChange={this.props.onClick} onBlur={(e)=>this.onblur(e)}/><p className="input_label">{this.props.name_of_unit}</p>
48          </div>
49          :
50          <div>
51            <p className="input_label">{this.props.name_of_button}(入力NG)</p>:<input type="text" className="input" name={this.props.nog} onChange={this.props.onClick} onFocus={(e)=>this.onfocus(e)}/><p className="input_label">{this.props.name_of_unit}</p>
52          </div>
53
54        }
55      </div>
56
57    )
58  }
59
60}
61

上記で、 render() は、ご質問に挙げられているコードから修正していません。
念のため、上記の修正版の ImputSomethingWithConfirm を動作確認して、PCでもスマホのブラウザ（確認に使用したのは、iPhone8 の Chrome と Safari）でも期待される動作に（一応）なっているかなと思えました。

とはいえ、やっていることがかなりトリッキーですし、ダイアログにスタイルをあてることもできないので、やはりダイアログコンポーネントを自作して、表示、非表示のフラグを this.state の中に持てるようにしたほうがよいように思えます。

以下、ダイアログを自作する際のベースとなるコンポーネントとして、候補になりそうなものを挙げます。