More than 5 years have passed since last update.

React-Draggableで<Draggable>内のインプットから勝手にフォーカスが外れる問題

Last updated at 2019-12-15Posted at 2019-12-15

React-Draggableを使ったコンポーネントでテキスト入力ができなくなる問題が発生したので対処法をメモ

環境

Chrome 78.0
React 16.8.6
React-Draggable 4.1.0

タイトルのまんまですが

<Draggable>
  <div>
    <input type="text" />
  </div>
</Draggable>

上記のコンポーネントで、inputに文字を入力しようとしてフォーカスを当てても瞬時にフォーカスが外れて文字が入力できない問題が発生。

Draggableにcancelというプロパティでdraggableの対象外にする要素のセレクタを渡せばいける。

<Draggable cancel="input[type=text]">
  ...
</Draggable>

どうやらドラッグ中に意図せぬテキストの選択が発生しないようにフォーカスをすぐに外す処理が入っているのが原因のようです。
なのでテキスト入力部分だけはdraggableの適用対象外とすることで解決できます。

過去には
enableUserSelectHack={false}というプロパティを渡す必要があったようですが、
現在のバージョン(4.1.0)ではcancelだけでいけるようです。