search

fabbricadigitale / paper-chip

A chip web component made with Polymer 2 following Material Design guidelines
http://webcomponents.org/element/fabbricadigitale/paper-chip
MIT License
31 stars 16 forks source link

Allow to create new chips in autocomplete mode #59

Open ainvaltin opened 6 years ago

ainvaltin commented 6 years ago

Add property allowAdd which when set to true would allow to create new chip in input even when the entered text is not present in the datasource.

ndormont commented 6 years ago

+1

leogr commented 6 years ago

Nice feature!

PRs are welcome!

leodido commented 6 years ago

This feature would be nice but I wonder which value/key we'll use for a new chip (with a label not present in the datasource) ...

ainvaltin commented 6 years ago

The label (aka display-property) for the new chip would be the text user entered into input field. The value would be undefined. Perhaps there could be a property user can assign callback func which inits new chip's object (ie assigns value property), but IMO it would have to work without it too...

I'm not familiar with the inner workings of this component, does it require (unique?) key for each chip? Does it make sense to say that when the chip doesn't have key assigned it is considered to be NULL and each NULL is distinct from other NULLs (like in relational database)?

leogr commented 6 years ago

@ainvaltin that's dirty.

Currently, paper-chip-input is using datasource content as data source. For each object within data source, the object's property named value (or as defined by value-property attribute) is used as unique value identifiers. Thus, values will contains an array of those values (duplicates are removed automatically).

The label is a different thing. Value and label may be different. Just as example, the mobile Gmail app shows the name of your contact (instead of the email address) if address book has it.

paper-chip-input and paper-chip work in a similar way the native select does:

<select>
<option value="1">label one</option>
<option value="2">label two</option>
</select>

and for the same reason value cannot be undefined (the label is used in case value is not set).

Your case can only work when the label is used as value. When a new text is entered, we could add to the datasource using the same value for the value and the label. That's the same thing that happens when in the GMail app you enter an email address that's not present in your address book. That's also a simply solution.

PRs are welcome!