Add interactive demo for chips as input element (add / select / remove)

[Simran-B]

Description

The Chips component examples do not cover an interactive demonstration of how chips can be entered / deleted.

http://www.material-ui.com/#/components/chip

Images & references

The demo of angular material supports adding, selecting and removing chips interactively: https://material.angularjs.org/latest/demo/chips

[samrocksc]

This may be outside of scope since typically removal/addition of a react item is going to be very dependent on the choice of state machine by the user.

You could use setState, Redux, Flux, or Alt.js to accomplish this in several different ways.

My recommendation would be to do something similar to using an array of [chip1,chip2,chip3] and then having array.push to add or array.reduce, if you wanted to do it using pure javascript, or do something outside of the state machine.

I don't know, any recommendations?

References:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

[Simran-B]

Not sure what all that is, I just wished there was a "full" example, because just static chips are quite boring and the behavior - although not described in detail in the specs - seems to belong to the component.

Although, upon further consideration, what I refer to as behavior actually belongs to a container component, that houses chip components. The chips themselves only need to look like a rounded rectangle and provide a delete button if they are deletable. Selection state (given that only a single chip can be selected at a time) and the input field for new chips actually belongs to the container.

That container component for chips would need to draw the chips plus an input field, handle user input like creating a new chip on enter or if certain separator characters are entered (tokenization), deleting a chip on backspace or delete key and changing the selection state when the arrow keys are used, as well as to provide the auto-complete list for new entries (described in the docs for contacts, but actually not limited to that type of input).

Would be super handy to have such a ready-to-use component so that you don't have to write all this yourself.

[samrocksc]

Definitely understandable for a ready-to-use component! One thing to remember with react is that it's a view component! That means programatically you can do just about anything you want to to the components that you build.

Material-ui is an amazing library, but it's not a one-stop shop. I think your question is more in line with React in general. In this sense, material-ui is an unopinionated framework which is very powerful as it allows us to work with it with a wide scale of different state methodologies.

A very easy way to learn how to add/remove chips would be to investigate those two MDN articles and learn how to create an array of chips, and then render them into your JSX. Then you can use push/reduce(or if you want to use the lodash functions to make it extra fun)!

[at0g]

👍 for interactive demos

it would make for a better example to show:

• chips wrapping onto multiple lines
• how overflow is handled (or not) when the length of the chip exceeds the width of the available space

[leMaik]

I just wanted to drop by to say that I implemented such an input element. 😸 It can be used with or without Redux or Flux, as you like.
https://github.com/TeamWertarbyte/material-ui-chip-input

PS: Yep, I know... I have to tidy up the code a little and add some documentation.

[mbrookes]

@leMaik That looks great! Please feel free to submit a PR to add this to the "Related projects" section of the docs, or perhaps even a link from the Chip docs page itself.

@Simran-B "The Chips component examples do not cover an interactive demonstration of how chips can be entered / deleted."

Not strictly true - the array example shows deletion at least, and addition just requires adding an element to the array. @leMaik's ChipInput is much more comprehensive though.

[mbrookes]

Closing in favor of #4952