【React】ファイル選択ダイアログを閉じた際にdialogが閉じないようにする方法

状況

以下のように<dialog>の中に<input type='file'>を記述している場合に、Chromeでファイル選択ダイアログをキャンセルで閉じた際にdialogも閉じてしまう。

// ...

  <dialog>
    <input type="file" />
  </dialog>

// ...

改善方法

ファイル選択ダイアログをキャンセルした際にcancelイベントが発生することが原因。
onCancelで以下のようにev.targetがdialogの場合にのみdialogを閉じるようにする。

// ...
  const handleCancel = useCallback(
    (ev: React.SyntheticEvent<HTMLDialogElement, Event>) => {
      if (ev.target instanceof HTMLDialogElement) {
        ev.preventDefault()
        closeModal()
      }
    },
    [closeModal]
  )

// ...
  <dialog onCancel={handleCancel}>