onMouseDownでautoFocusが効かない
inputタグにautoFocusを設定すると、文字入力が可能になっている状態で表示されます。
<input type="text" ... autoFocus />
onClickで何らかのstateを切り替えてinputを表示させた際は問題ありませんでしたが、
onMouseDownイベントを使って左クリック以外で表示を切り替えたい場合にfocus状態になりませんでした。
色々試した結果、e.preventDefault()することで解決できました。
<Button onMouseDown={(e)=>handleMouseDown(e)}>... const handleMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => { e.preventDefault() if (e.button == 2) {//右クリック setIsEditing(true) } }