Enable creating new items when no match is found #480
Replies: 12 comments
-
Your's is an interesting use-case though - one that I haven't thought of before. I think it's a good one to have. I think exposing a new event
Another flow could be: In this case, we would use a bool prop
This is less flexible as the control cannot (rather should not) figure out where to place the new item. With flow 1, you also get control of whether to create the item or not - e.g. you may want to have logic to eliminate junk items like Happy to discuss more. |
Beta Was this translation helpful? Give feedback.
-
Thank you for your fast response @mrchief,
Yeah, It was my fault. I got it now. Thank you. After I applied my work-around for the case, I realized For example, a HR want to add new job "Manager" to the list which already contains "Product manager", onNoMatches` won't be fired (because "Product manager" matches the term "Manager"), so the HR cannot create "Manager" position. So, I think maybe I know this one is not a simple feature, so it may take time. Do you think we have any work-around for the case with the current version? Thank you and have a nice day @mrchief |
Beta Was this translation helpful? Give feedback.
-
Not sure how this would work or if it's a good idea to have this kind of workflow. Think about this from a UX perspective, how does one tell when to select vs. when to add new? A better UX might be to give the user a choice to add new items when nothing's found. That can be done by changing the message for no matches and adding a plus button outside of the component that takes the user through item creation flow. Once a new item is created, you then provide the updated tree data to the component. |
Beta Was this translation helpful? Give feedback.
-
Thank you for the response @mrchief ,
Here is the UI of Notion. There is always "Create" option. Some components place the "Create" option at the beginning of the list. Some have it at the end (like Notion).
I already did this, and encountered the case of partial matching :( . Besides, I had to custom
|
Beta Was this translation helpful? Give feedback.
-
The screenshot makes things a lot clearer! I'm afraid there's no easy way to do this. This would be something that's possible with a planned feature in the next version but that's far from being done and I don't have a timeline for that release. I can think of a possible solution which relies on taking in a A slightly less complex solution would be something like this:
Doesn't seem like an elegant solution if you ask me. I can't think of any other ideas at the moment but I'm open to suggestions. |
Beta Was this translation helpful? Give feedback.
-
Yeah, I totally understand.
That's cool, I think it would work. I'm wonder if we can expose a prop like const [searchTerm, setSearchTerm] = useState('');
.....
<DropdownTreeSelect
onSearchTermChanged={(newTerm, oldTerm, data)=>{
setSearchTerm(newTerm);
}}
floatingItem={{
position: 'start', // in {'start', 'end'}
element: (
<button
onClick={() => {
alert(`Creating ${searchTerm}`)
}}
>
Create "{searchTerm}"
</button>
)
}}
/> What do you think @mrchief ? P/S: Sorry for my English and the props naming :) |
Beta Was this translation helpful? Give feedback.
-
We can certainly give it a try. We have to be very carefully not to cause tree re-renders :)
No worries! Please don't apologize in every post 😄 |
Beta Was this translation helpful? Give feedback.
-
Thank you @mrchief . |
Beta Was this translation helpful? Give feedback.
-
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
Beta Was this translation helpful? Give feedback.
-
Hello, Any news about this feature ? I am also interested in this behavior, also I think other would benefit from it. Thanks for your time |
Beta Was this translation helpful? Give feedback.
-
@DryJhin are you interested in working in building this? |
Beta Was this translation helpful? Give feedback.
-
I do not promise, but I will make a time in next months to do this feature sure |
Beta Was this translation helpful? Give feedback.
-
Describe the bug
To Reproduce
Expected behavior
Additional context
To work-around, I will using document.querySelector to get the latest search term then.
But I think this issue is worth to be concerned.
Beta Was this translation helpful? Give feedback.
All reactions