datepicker : カレンダーが一瞬で表示されて消える

Question

今していること

Datepickerを使用し、ホテル予約システムのようなものを構築。

以下URL
https://jsfiddle.net/qpmdxtu8/

困っていること

チェックイン選択後、チェックアウトカレンダーが表示される実装
→しかし一瞬だけ表示されてすぐに消える
→そのままブラウザの違うタブや,適当なアプリを開いてまた戻る
→チェックアウトのカレンダーが表示されている

この挙動の原因・解決策がいまいち見つからず質問させていただきました。
よろしくお願いいたします。

Comments

[m.ts10806]

ソースコードはなるべく質問本文に提示いただけたらと。

Answer 1

inputにフォーカスされてないからじゃないかな？

      $("#checkout").datepicker("option", "minDate", min);
      setTimeout(function(){
       $("#checkout").focus();
      },500)

Comments

[kazoogon]

回答ありがとうございます。これでできました！

質問なんですが、実は$("#checkout").focus();も一回使っていたんですが、ここでなぜsetTimeoutをしたらいけるのかが謎です、一瞬だけだとfocusされない？？　みたいなことはないと思うんですが。。。

[Dot]

いえ
表示が間に合わなくて？同じところに表示されたから入れてみただけです
setTimeout外すと同じところに表示されて見にくいかと

[Dot]

focusだけだとなりますね...
前に作ったやつを見たのでそれをそのまま...

[Dot]

jqueryのバージョンを3.3.1してました
focusだけだと同じところに表示されます

[kazoogon]

https://42-design.work/technology/does-not-work-focus-selector-at-focusout-event/
Java Script処理時にfocusは起動しない
　→Java scriptが一回処理止まる動作が必要

ってことなんですかね。。