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だけでいけるようです。