web-dev-qa-db-fra.com

React Material UI open modal from within autocomplete perdre le focus

J'utilise la bibliothèque material-ui et j'ai besoin d'une saisie semi-automatique où chaque élément à l'intérieur de cette saisie semi-automatique est cliquable et ouvre un modal.

La structure en général est:

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

    );
}

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

}

Notez que le ModalBtn est un composant qui ne peut pas être divisé en deux composants Button et Modal.

Le problème est que lorsque vous cliquez sur le bouton à l'intérieur du modal - le focus est conservé à l'intérieur de la saisie semi-automatique, et le modal n'obtiendra jamais le focus (si j'ai une entrée dans le modal - je ne peux rien écrire à l'intérieur).

J'ai essayé tous les accessoires standard liés à la saisie semi-automatique/au focus modal (disableEnforceFocus, disableEnforceFocus, etc ...) mais rien ne fonctionne.

Voici un exemple de code et de boîte de travail . Comme vous pouvez le voir - si vous cliquez sur le bouton qui ne se trouve pas dans le composant de saisie semi-automatique - tout fonctionne (vous pouvez ajouter du texte dans le champ de saisie). Si vous cliquez sur le bouton qui se trouve à l'intérieur de la saisie semi-automatique - le champ de saisie à l'intérieur du modal n'est pas modifiable (vous perdez le focus).

Voici un exemple du problème:
enter image description here

javascriptreactjsautocompletemodal-dialogmaterial-ui
6
Dekel

Le problème dans votre code était que le Modal était rendu à partir de la balise du composant AutoComplete, ce qui n'était pas correct en raison de la visibilité des composants, la hiérarchie des composants était le problème.

Le correctif est de déplacer le Modal dans le composant FixedTags et de passer le gestionnaire ouvert au ModalBtn dans le renderTags prop;

J'ai mis à jour votre bac à sable avec une variante fonctionnelle ICI

Les changements sont ci-dessous

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