viclafouch / mui-chips-input

📌 A chips input designed for MUI (Material ui) V6
https://viclafouch.github.io/mui-chips-input/
MIT License
83 stars 19 forks source link

Add Chip on Spacebar #3

Closed mark-crafted closed 2 years ago

mark-crafted commented 2 years ago

Is your feature request related to a problem? Please describe. We want to add chips on pressing spacebar, in addition to pressing Enter. Right now it seems the only way to do this is to use the "onInputChange," check for the last character being a space, and then "clearInputOnBlur" and manually blur/re-focus. I'm still struggling to get this to work correctly though.

Describe the solution you'd like We could use a simple "addChipOnSpacebar" prop that would prevent the logic living outside the component. When a user types a space bar, run the validation, and then if it passes, trigger the addChip just as if they had pressed enter. Then clear the 'input value' to be ready to type the next entry.

Probably also update the helper text to a new default, to represent the new condition.

Describe alternatives you've considered I've tried overriding the inputProps={{value: ''}} and other similar changes. I'm thinking this prop was overridden to provide the chips themselves, and so I cannot seem to access the input's current typed-in-value, to clear it back out.

As mentioned above, I've found the workaround of blurring the input, and using the clearInputOnBlur prop.

Additional context N/A

mark-crafted commented 2 years ago

Also meant to say, thank you for building this package! Very easy to use (apart from the above request,) and works great!

viclafouch commented 2 years ago

Hello !

New version 1.3.0 available : https://github.com/viclafouch/mui-chips-input/releases/tag/v1.3.0.

New prop addOnWhichKey. Choose on which key (that matches event.key) the user will use to add the current chip. Default enter.

<MuiChipsInput addOnWhichKey={['a', ' ']} />
<MuiChipsInput addOnWhichKey=" " />
mark-crafted commented 2 years ago

@viclafouch Hey Victor, thank you very much! Appreciate your quick response (and pardon my own slow reply, I may have missed a notification).

Cheers!