Zenn
🎉

MUIのPopoverなど表示時、フォーカスを移動させたくない

2023/05/18に公開
React
mui
tech

以下のPropsを追加する

disableAutoFocus
disableEnforceFocus
disableRestoreFocus

テキストエリアに入力中、バリデーションでエラーメッセージをPopoverで表示するときなど有効

<Popover
	id="simple-popover"
	open={open}
	onClose={handleClose}
	anchorEl={anchorEl}
	anchorOrigin={{
	  vertical: "bottom",
	  horizontal: "center"
	}}
	transformOrigin={{
	  vertical: "top",
	  horizontal: "center"
	}}
	disableAutoFocus
	disableEnforceFocus
	disableRestoreFocus
>

詳細
https://mui.com/material-ui/api/modal/

Discussion