web-dev-qa-db-ja.com

ReactオートコンプリートからマテリアルUIオープンモーダルがフォーカスを失う

私はmaterial-ui libを使用しており、オートコンプリート内にある各項目をクリックしてモーダルを開くオートコンプリートが必要です。

一般的な構造は次のとおりです。

const ModalBtn = () => {
    ...
    return (
        <>
            <button ... (on click set modal to open)
            <Modal ...
        </>

    );
}

const AutoCompleteWithBtns = () => {
    return (
        <Autocomplete
            renderTags={(value, getTagProps) =>
                value.map((option, index) => <ModalBtn />)
            }
            ...
        />
    );

}

ModalBtnは、ButtonとModalの2つのコンポーネントに分割できないコンポーネントであることに注意してください。

問題は、モーダル内のボタンをクリックすると、フォーカスがオートコンプリート内に保持され、モーダルがフォーカスを取得しないことです（モーダル内に入力がある場合、内部には何も書き込むことができません）。

すべての標準のオートコンプリート/モーダルフォーカス関連の小道具（disableEnforceFocus、disableEnforceFocusなど...）を試しましたが、何も機能しません。

これが 動作するコードとボックスの例 です。ご覧のとおり、オートコンプリートコンポーネント内にないボタンをクリックすると、すべてが機能します（入力フィールド内にテキストを追加できます）。オートコンプリート内にあるボタンをクリックした場合-モーダル内の入力フィールドは編集できません（フォーカスを失います）。

これは問題の例です：
enter image description here

javascriptreactjsautocompletemodal-dialogmaterial-ui
6
Dekel

コードの問題は、モーダルがAutoCompleteコンポーネントのタグ内からレンダリングされたことでした。これは、コンポーネントの可視性のために問題でした。コンポーネントの階層が問題でした。

修正は、Modalコンポーネント内でFixedTagsを移動し、オープンハンドラーをModalBtnプロパティのrenderTagsに渡すことです。

サンドボックスを動作するバリアントで更新しました [〜＃〜]こちら[〜＃〜]

変更点は以下の通りです

const ModalBtn = ({ handleOpen }) => (
  <button type="button" onClick={handleOpen}>
    Open Modal (not working)
  </button>
);

const FixedTags = function() {
  const classes = useStyles();
  const [modalStyle] = React.useState(getModalStyle);
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <Autocomplete
        multiple
        options={autoCompleteItems}
        getOptionLabel={option => option.title}
        defaultValue={[autoCompleteItems[1], autoCompleteItems[2]]}
        renderTags={(value, getTagProps) =>
          value.map((option, index) => <ModalBtn handleOpen={handleOpen} />)
        }
        style={{ width: 500 }}
        renderInput={params => (
          <TextField
            {...params}
            label="Fixed tag"
            variant="outlined"
            placeholder="items..."
          />
        )}
      />
      <Modal open={open} onClose={handleClose}>
        <div style={modalStyle} className={classes.paper}>
          <h2 style={{ color: "red" }}>This one doesn't work</h2>
          <p>Text field is not available</p>
          <TextField label="Filled" variant="filled" /> <br />
          <br />
          <br />
          <FixedTags label="Standard" />
        </div>
      </Modal>
    </>
  );
};
3
Sabbin