ある特定のモーダル上でラジオボタンが動かない

症状

CodeMirrorEditor ないでレンダーされるモーダル(HandsontableModalなど)の中ではなぜかラジオボタンが正常に動作しない

ラジオボタンによるstateの変更などはできるがcheckが表示されない

markdown を洗濯しているはずなのに点がつかない

調査

CodeMirrorEditor にてラジオボタンだけをもつモーダルを作成

→動かない

(CodeMirrorEditor を子に持つ)Editor コンポーネントないで上記モーダルをレンダリング

→動く

Editor コンポーネントないのSubscribe タグの子要素に上記モーダルを追加

→動かない

Editor コンポーネントないのDropzoneの子要素のdivの直下に上記モーダルを追加

→動かない

Editor コンポーネントないのDropzoneのとなりに上記モーダルを追加

→動く

Editor コンポーネントないのDropzoneの子要素のdivのとなりに上記モーダルを追加

→動く

CodeMirrorEditor.jsx
...
      <div style={flexContainer} className="editor-container">
          // ここだと動く！！！
        <Dropzone
          ref={(c) => { this.dropzone = c }}
            ...
        >
          {({
            getRootProps,
            ...
          }) => {
            return (
              // ここだと動く！！！
              <div className={this.getDropzoneClassName(isDragAccept, isDragReject)} {...getRootProps()}>
              // ここだと動かない！！！
                { this.state.dropzoneActive && this.renderDropzoneOverlay() }

                { this.state.isComponentDidMount && this.renderNavbar() }

                {/* for PC */}
                { !isMobile && (
                  <Subscribe to={[EditorContainer]}>
                    { editorContainer => (
                      // ここだと動かない！！！
                      // eslint-disable-next-line arrow-body-style
                      <CodeMirrorEditor
                        ref={(c) => { this.cmEditor = c }}
                          ...
                      />
                    )}
                  </Subscribe>
                )}
                ...

結果

CodeMirrorEditor > Dropzone の

<div className={this.getDropzoneClassName(isDragAccept, isDragReject)} {...getRootProps()}>

の {...getRootProps()} を消したら動くようになった

https://github.com/react-dropzone/react-dropzone-v10.2.2 external_link とラジオボタンの相性が悪い

解決策

react-dropzone を v11.2.4 にあげたら動くようになった