Material UI autocomplete popper custom closes on click

Asked
Active3 hr before
Viewed126 times

3 Answers

clickautocompletecustommaterial
90%

The problem is the onBlur which occurs before your onClick. Material UI offers to ignore the blur behaviour on debug mode but that happens only if you have a value inside your Autocomplete.,The workaround is to use onMouseDown instead of onClick,Please be sure to answer the question. Provide details and share your research!

Based on your Codesanbox please change the onClick event to onMouseDown event in your <button> component

<button
   style={{ margin: "10px", padding: "5px" }}
   onMouseDown={() => alert("clicked")}
>
88%

When using the Autocomplete component with custom template (like the GitHub Autocomplete in the Material-UI documentation), when the Popper is opened, the input is empty. Clicking on the empty input is closing the Popper instead of just getting the focus.,When using the Autocomplete inside a Popper, when the input is empty, clicking on it closes the Popper.,@Julien-Hery Thanks for the analysis of the problem. I think that this should be our baseline expectation: https://v4-5-2.material-ui.com/components/autocomplete/#customized-autocomplete.

diff--git a / docs / src / pages / components / autocomplete / GitHubLabel.tsx b / docs / src / pages / components / autocomplete / GitHubLabel.tsx
index 40e96300 c. .493767189 100644
-- - a / docs / src / pages / components / autocomplete / GitHubLabel.tsx
   ++ + b / docs / src / pages / components / autocomplete / GitHubLabel.tsx
@ @ - 130, 7 + 130, 11 @ @
export default function GitHubLabel() {
   setAnchorEl(event.currentTarget);
};

-
const handleClose = () => {
      +
      const handleClose = (_, reason) => {
            +
            if (reason === 'toggleInput') {
               +
               return; +
            } +
            setValue(pendingValue);
            if (anchorEl) {
               anchorEl.focus();
72%

The API documentation of the Autocomplete React component. Learn more about the props and the CSS customization points.,If that's not sufficient, you can check the implementation of the component for more detail.,You can override the style of the component thanks to one of these customization points:

Pretag
 Pretag team - issue, fix, solve, resolve

Other "click-autocomplete" queries related to "Material UI autocomplete popper custom closes on click"