How to add function to "X" icon in Material UI Searchbar?

Question

I have the following code:

import SearchBar from "material-ui-search-bar";

const data = [
  {
    name: "Jane"
  },
  {
    name: "Mark"
  },
  {
    name: "Jason"
  }
];
export default function App() {
  const [results, setResults] = useState();

  const filteredResults = data.filter((item) => {
    return Object.keys(item)?.some((key) => {
      return item[key].includes(results?.toLowerCase());
    });
  });
  return (
    <div className="App">
      <SearchBar
        value={results}
        onChange={(value) => setResults(value)}
        placeholder="Please enter name..."
      />

      {filteredResults.map((item) => {
        return <li>{item.name}</li>;
      })}
    </div>
  );
}

codesandbox

when I delete name from search bar using delete keyboard all names from data are displayed below the search bar, but if I click X button, it clears the search bar but doesn't display all names. Is there a way to add a function to this X button so when I click it, it acts the same way as delete keyboard?

Answer 1

You can pass a function to the onCancelSearch prop to reset the results state variable.

<SearchBar
  value={results}
  onChange={(value) => setResults(value)}
  onCancelSearch={() => setResults('')}
/>

---

Suggestions

It's better to initialize results with an empty string. You can now remove the ? in results?.toLowerCase() since results will never be nullish ( undefined or null ).

const [results, setResults] = useState('')

You should pass the key prop to the li element. You can add an id property to the items array to use as the key or use the item index.

{
  filteredResults.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))
}

And there are a couple of issues with the filtering logic.

• You're converting the search query to lowercase but not the name. In your example, if you search for 'ja' , nothing would show up even though matches exist (Jane and Jason).

• filteredResults will throw an error if any of the object values do not have the includes method (You can reproduce the issue by adding a numeric id field to the array items). You could fix it by using a searchableKeys array to only perform the search in specific fields.

const searchableKeys = ['name']

const filteredResults = data.filter((item) =>
  searchableKeys.some((key) =>
    item[key].toLowerCase().includes(results.toLowerCase())
  )
)

---

I would recommend renaming results to query or searchQuery for clarity.

Answer 2

Hello upon checking your problem, the reason why its remapping the list on delete key (in keyboard) because it triggers the onChange event of the searchBar to have the same event as the searchBar, i've tried it on my end and it seems that this solution can be solve your issue

<SearchBar
  value={results}
  onChange={(value) => setResults(value)}
  placeholder="Please enter name..."
  closeIcon={<button onClick={() => setResults("")}>clear</button>}
/>

the closeIcon props - overrides the close icon and its methods.. here is the documentation that i check material-ui-search-bar

here also the replicated/solved code-sandbox