Material UI Autocomplete create clickable Button in noOptionsText

user_3834178 0
Viewed 5572

I'm using Material Ui Autocomplete component. I would like that when the user types something, and he gets no results, the noOptionsText shows a button that can be clicked to do something:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <Autocomplete
      options={["HELLO", "HI"]}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
      noOptionsText={
        <Button onClick={() => console.log("CLICK SUCCESSFUL")}>
          No results! Click me
        </Button>
      }
    />
  );
}

Here the button appears successfully, but then when I click it the Autocomplete is closed before the button can receive the click.

It works if I set debug={true} to force keep the menu open, but this have many other side effects. Tried also forcing open={true} but it still gets closed.

How would you do that?

Codesandbox demo: https://codesandbox.io/s/vigilant-haslett-sngyb?file=/src/App.js

material-ui reactjs
3 Answers
user_140565910

When you click the button in the no-option menu, the TextField is blurred (unfocused), you can know that by logging reason in onClose callback

onClose={(e, reason) => {
  console.log("on close", reason);
}}

The only way to suppress this is to set debug = true as documented in Material-UI API docs.

But if you don't want to use debug, there is another workaround by making the button part of the option menu itself. Remember unlike the no-option menu, you can register a click in the Autocomplete menu to select option normally.

You can do that by filtering the option as usual but if there is no option found, return the button option instead. Here is an example

import Autocomplete, { createFilterOptions } from "@material-ui/lab/Autocomplete";

const options = ["HELLO", "HI"];
const buttonOption = (
  <Button
    onClick={(e) => {
      console.log("CLICK SUCCESSFUL");
      e.stopPropagation();
    }}
  >
    No results! Click me
  </Button>
);
const defaultFilterOptions = createFilterOptions();

export default function App() {
  const [selectedOptions, setSelectedOptions] = React.useState("");

  return (
    <Autocomplete
      options={options}
      onChange={(_, value) => {
        if (typeof value === "string") {
          setSelectedOptions(value);
        }
      }}
      renderOption={(o) => o}
      getOptionLabel={(o) => (typeof o === "string" ? o : "")}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
      filterOptions={(options, state) => {
        const results = defaultFilterOptions(options, state);

        if (results.length === 0) {
          return [buttonOption];
        }

        return results;
      }}
    />
  );
}

Live Demo

Edit Material-UI Autocomplete NoOption Button

user_94494260

There is an easy way you have to declare a state let just say "Open" and overwrite the Open prop of Autocomplete, set debug={true}, and when you click on Button in noOption, there you can set your Open state to false. In this way, it will close on Button Click.

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Button from "@material-ui/core/Button";

export default function App() {
const [Open, setOpen] = React.useState(true);
  return (
    <Autocomplete
      Open={Open}
      debug={true}
      options={["HELLO", "HI"]}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
      noOptionsText={
        <Button onClick={() => {
            console.log("CLICK SUCCESSFUL")
            setOpen(false)
        }}>
          No results! Click me
        </Button>
      }
    />
  );
}
user_134871310
Related