Material-UI-Chip-Input is an excellent package created by TeamWertarbyte. It’s core functionality is that it allows a user to quickly create chips from text.
Material-UI-Chip-Input has tons of functionality (and props to support it). However, one thing that is missing (actually, broken it seems) at the time of writing this article is autocomplete.
The History Behind the Broken DataSource Prop
The original chip input package was supposed to have autocomplete functionality. The dataSource prop was created to receive an array of autocomplete options.
However, somewhere in the transition from MUI version 0 to version 1, and due to MUI not supporting autocomplete functionality that TeamWertarbyte was expecting, support for chip input autocomplete was dropped. You can read the history on this issue tracker for more info. (Material-UI does have an autocomplete component, you can read more about that here).
Material-UI-Chip-Input With Autocomplete
It took quite a bit of research to realize autocomplete is no longer functional in material-ui-chip-input. The purpose of this post is to make it easier to find this info and give an updated solution.
Maik Marschner, one of the co-founders of TeamWertarbyte, created this example of chip input autocomplete in 2018.
Maik’s example uses react-autosuggest, autosuggest-highlight, material-ui-chip-input, and a few Material-UI components to create a simple drop-down with suggestions.
The AutoSuggest component from react-autosuggest takes several props, some of which are: a container for rendering suggestions, a component for the line items (suggestions) in the container, and a suggestion fetch function.
Within the line item component, autosuggest-highlight/match and autosuggest-highlight/parse are used for applying UI styling to different parts of the suggested text.
I have updated his example with newer syntax to fit better with current projects. I also have all the functionality in one file for easy import. Simply pass in an array of data like so:
const suggestions = ['Arkansas', 'Alabamba', 'Alaska', 'Arizona']
//skip a few lines...
//JSX in return statement
<ChipInputAutosuggest data={suggestions} />My simple example accepts an array of strings, but it could easily be configured to accept objects or strings.
In my Code Sandbox, I only use local data. See Maik’s code for an example that queries a remote data source.
Resources
Code Sandbox where I took TeamWertarbyte’s original StoryBook example and updated it with hooks.
Looking to test your JS knowledge? Challenge yourself with these 50 difficult JavaScript questions.
See my guide for styling individual Chips.
Here’s another useful 3p MUI library: Notistack for MUI Snackbars
Original TeamWertarbyte StoryBook interactive example. Here’s the code they originally wrote for this example.
