Support of arrayOf(object) about material-ui-chip-input

[avocadowastaken]

@leMaik Material UI is going to change AutoComplete API soon mui/material-ui#5062

---

btw Great Job!

[chaitanya-bhagavan]

@leMaik Would love to test out this feature if its ready.

[chaitanya-bhagavan]

@leMaik Works as expected. Thanks for a very useful component.

[leMaik]

This would be possible, even without introducing breaking changes! Thanks for the suggestion, I'll add it soon.

[leMaik]

After re-reading this issue, I found that this is already possible using dataSource and dataSourceConfig to specify which attributes should be used for the labels and the values. See the Auto Complete doc for more information.

At the moment, this component would use the labels as values, though. I don't really know how to handle this, because the user might create new values that don't distinguish between label and value (but only have a value).
Should I add an option to block users from creating custom chips (with values that aren't present in the data source) and treat custom chips (entered by the user) as values?

[leMaik]

@umidbekkarimov They are changing everything soon with the next branch and we actually already started contributing to it. Thanks for the hint! 👍

I'll update this component when the new AutoComplete arrives.

[takealuke]

I was able to use chipRenderer to define a function that processes an object to create the chip (using a value from a prop within that object) BUT: when I try to use handleAddChip or handleDeleteChip (which the documentation claims receive "chips" as arguments) I only receive the string value.

To elaborate. here's my code within the chipRenderer function ( where value is { text: , value: } ):

      let displayText = value;
        if (displayText !== null && typeof displayText === 'object') {
            displayText = value.value;
            key = value.text;
        }


        let chip = (
            <Chip
                key={key}
                style={{ margin: '8px 8px 0 0', float: 'left', pointerEvents: isDisabled ? 'none' : undefined }}
                backgroundColor={isFocused ? blue300 : null}
                onTouchTap={handleClick}
                onRequestDelete={handleRequestDelete}>
                {displayText}
              </Chip>
        );

        console.log(chip.key);

        return chip; 

I'm using the unique ID as the "key" for the element -- which I would be able to access if "chips" were actually passed to the handler functions. Any ideas for the right way to make this work? Besides creating a reverse lookup dict from displayed name back to ID?

[leMaik]

@takealuke It's cool that you can already achieve this by using a custom chipRenderer, that's the way I'd like this feature to be implemented. 👍 The documentation only says that onRequestAdd and onRequestDelete receive string values (the value of the chip to be added or deleted) though, so this is not a bug.
The problem right now is that there is no way to get onRequestAdd to be called with a custom object, it's always the string the user entered. This is exactly what blocks this issue. I'll look into this soon.

[max-l]

I've been trying to use @takealuke's approach, the only way my custom chipRenderer gets called is if the dataSource fields contains strings, that creates other problems,

If I supply a dataSourceConfig={{text:'label', value: 'value'}},
then I get the Invalid prop dataSource[0] of type object supplied to ChipInput, expected string.
error...

I'd really love to have that dataSource as array of object working !

[leMaik]

@max-l I totally get that you'd love to have this working. At the moment, this feature isn't implemented, I'm afraid. 😞 That's why it doesn't work for you. I'll try to implement this this weekend. 👍

[leMaik]

@chaitanya0bhagvan I finally started adding this. 🎉 Please take a look at the key-value-chips branch and let me know what you think and if it works!

It still has some bugs and isn't finished.

[voxbox-io]

Thanks! I tried but it's not working for me. It still works with standard flat array as dataSource, but not with a custom dataSourceConfig :

const dataSourceConfig = {
  text: 'text',
  value: 'value',
}  

The dropdown options do show, but selecting an option from the dropdown doesn't add it as a chip.

I am using MaterialUI 0.16.0

[leMaik]

@voxbox-io Are you sure? That worked for me, in the story I added.

[voxbox-io]

Quite sure, this simple example is not working for me:

<ChipInput
        dataSource={[{ text: 'Chip 1', value: 'one' }, { text: 'Chip 2', value: 'two' }]}
        dataSourceConfig={{ text: 'text', value: 'value' }}
        defaultValue={[{ text: 'Chip 1', value: 'one' }]}   
/>

It shows default values OK, but clicking on any value from dropdown throws error 'Cannot read property 'refs' of null' at line 212

if (!this.autoComplete.refs.menu)

[chaitanya-bhagavan]

@leMaik Yes I got the same error as @voxbox-io . I cloned your repo and ran your storybook example even that is not working. I am not able to add or delete chips. I tried this code in my project and found that the call backs are not getting called at all.

[leMaik]

Okay, okay. 😉 I'll fix it this weekend, I promise!

[leMaik]

@chaitanya0bhagvan @voxbox-io I think I fixed this. :) Could you please try again if it works for you now?

[max-l]

Just tried this branch : a6e266d

and I confirm that it works when using a dataSource of objects and setting the proper
dataSourceConfig

Thanks !

[voxbox-io]

Works like a charm now, thanks! 👍

[leMaik]

Great! I'll merge the changes into master, then.
A new issue that came to my mind is that it's currently not possible to disallow adding custom chips (with values that are not available in dataSource) in uncontrolled mode. I'm not sure if this is something that this component should handle or if this should be left for the reducer to decide in controlled mode. I'd prefer the later approach, but I'd appreciate your feedback.

[chaitanya-bhagavan]

@leMaik I am getting a error when I press 'Key Down' to open the autocomplete options.

[leMaik]

@chaitanya0bhagvan Please open a new issue, the error doesn't seem to be related to this issue. 😉

[leMaik]

@chaitanya0bhagvan I can't reproduce the error, but I'm not sure if I did the same steps. Could you please provide a minimal example that produces the error?

[chaitanya-bhagavan]

@leMaik You can reproduce this error in your story book. Select with autocomplete or objects as chips, uncontrolled or objects as chips, controlled click on the input and press down arrow twice. As the autocomplete options is displayed an error is thrown in the console.

[leMaik]

@chaitanya0bhagvan Thank you! 👍 Moved this to #32.

[calic39]

@leMaik I can't get it working when trying @voxbox-io example with custom chip renderer. The autocomplete is showing the results but when I click on the item, chip is not created. Do you have an idea what could be wrong? Thanks!

P.S. chip is created fine when it's a custom chip - not selected from autocomplete

[leMaik]

@calic39 That might be a bug, I'll check that tomorrow. Maybe your chipRenderer is not implemented correctly, though. Could you please provide some code?

PS: Would you mind opening a new issue for your question?

[calic39]

@leMaik Sorry man, you were right, I implemented chipRenderer the wrong way. Thanks for the great work!

[leMaik]

@calic39 Glad that I could help! 😊