feat(@clayui/autocomplete): LPD-54854 Allow adding new items to the autocomplete dropdown #6097
Conversation
| }} | ||
| roleItem="option" | ||
| > | ||
| {messages.setAsHTML && |
There was a problem hiding this comment.
We don't need to allow setting html. The designs don't provide this flexibility so we shouldn't either..
There was a problem hiding this comment.
@ethib137 in some of the documentation there were some differences that required flexibility.
Case 1: Has parts of the message italicized and message text after the value
Case 2: No italics and message is before the value
HTML passed in the message prop gets escaped. I believe the only way to support this is through setting HTML.
| if (allowsCustomValue && items && onAddNewItem) { | ||
| onAddNewItem(); | ||
|
|
||
| items.push(value); |
There was a problem hiding this comment.
We shouldn't be adding the value to the list of items. That behavior can be handled if it's a controlled component by having the parent component add it to the list when onAddNewItem is called.
| key={value} | ||
| onClick={() => { | ||
| if (allowsCustomValue && items && onAddNewItem) { | ||
| onAddNewItem(); |
There was a problem hiding this comment.
This should probably call onAddNewItem(value); passing in value.
|
|
||
| inputElementRef.current?.focus(); | ||
|
|
||
| setValue(''); |
There was a problem hiding this comment.
We shouldn't be setting the value to an empty string. When this is selected we are confirming the value of the input, so the value should stay.
| const ESCAPE_REGEXP = /[.*+?^${}()|[\]\\]/g; | ||
|
|
||
| const defaultMessages = { | ||
| allowsCustomValue: 'Add {0}', |
There was a problem hiding this comment.
This should probably be called something more like "addNewItem" or "addCustomValue"
| <DropDown.Item | ||
| className="" | ||
| id={value} | ||
| key={value} |
There was a problem hiding this comment.
Why are you adding id and key props?
| if (allowsCustomValue && items && onAddNewItem) { | ||
| onAddNewItem(); | ||
|
|
||
| items.push(value); |
There was a problem hiding this comment.
Same here, we shouldn't be adding to items.
| <li className="dropdown-divider"></li> | ||
| </> | ||
| )} | ||
| <DropDown.Item |
There was a problem hiding this comment.
Shouldn't this only render if allowsCustomValue is false?
There was a problem hiding this comment.
@ethib137 I was under the impression that allowsCustomValue === true is for adding items not on the list.
/**
* Flag to allow an input value not corresponding to an item to be set.
*/
We could make the description better.
| id="clay-autocomplete-add-new-item" | ||
| messages={{ | ||
| allowsCustomValue: | ||
| '<span class="text-primary">{0} <i>(Add New Category)</i></span>', |
There was a problem hiding this comment.
Adding text-primary should be in our component rather than our example.
| onAddNewItem={() => { | ||
| if (items.indexOf(value) < 0) { | ||
| setItems(() => { | ||
| const newItems = [ |
There was a problem hiding this comment.
To make this controlled, you need to add the items prop to the autocomplete passing in your items.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@ethib137 I updated this PR with my progress. I'm not sure about allowing adding items when the component is uncontrolled. Items would be handled internally and couldn't be accessed outside the component. I left |
2 participants
https://liferay.atlassian.net/browse/LPD-54854
This is still a draft PR. I'm having issues with the React component type (controlled / uncontrolled). From my experimentation, controlled autocomplete isn't functioning, but it could be a knowledge issue here. The storybook example I added is an uncontrolled component.
This PR adds the prop
onAddNewItem. It's called when a new item is added to the list via the enter key or clicking on the dropdown item button. I'm pretty sure I've implemented it incorrectly. I'm looking for some help writing it the right way.I've added the keys
allowsCustomValueandsetAsHTMLto themessagesprop.allowsCustomValueis used to pass in the text to display for the Create New Menu Item interaction, https://liferay.atlassian.net/wiki/spaces/ENGLEXICON/pages/3811442825/Create+New+Option#%E2%9C%A8-Interaction.The
setAsHTMLkey is used to enable the ability to pass in markup as well as text for the Create New Menu Item interaction.