feat(SelectMenu): allow creating option despite search

[ineshbose]

🔗 Linked issue

Resolves #1068, fixes #1073

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Say I want to create an option with the name "enhance"; the menu won't show it as a option as we do have a search result, though its a subset, not an exact.

This PR should allow creating such options.

Change made: allow creatable to be set to "always" -- this also allows us to not have to add an additional prop and additional maintenance.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Dec 15, 2023 10:39am

[benjamincanac]

@ineshbose Thanks for starting this out! This should solve: #1068

[ineshbose]

Amazing! I didn't know that issue was listed.

One thing we may need to consider is that the create option in such cases should appear on top of the options, rather than below it, so I'm seeing if we can reuse the template for the create option to be placed as the first li element.

[benjamincanac]

Indeed, you can move it first! What will be the name of the prop?

[ineshbose]

It just modifies creatable prop to take in a string value "always"

[ineshbose]

In cases where there are no results and we have the message showing up, do we want this:

or this:

I guess ideally we'd want to hide it?

Also noticed that GitHub has the option at bottom:

while something like Vue-Multiselect at top:

[ineshbose]

OK so I've left the option at the bottom for now, but the template is reusable as a VNode too if we ever want to change/add in the future.

[bdebon]

Wonderful guys! So nice to see that it's coming so fast!

[benjamincanac]

@ineshbose I've updated the docs but I think there is an issue with the logic:

CleanShot.2023-12-13.at.11.50.02.mp4

Also, could it be possible to solve this at the same time? #1073

[ineshbose]

@ineshbose I've updated the docs but I think there is an issue with the logic:

CleanShot.2023-12-13.at.11.50.02.mp4

Also, could it be possible to solve this at the same time? #1073

Yeah it's a separate issue. I found that the options get duplicated as well in the existing implementation. Are you planning a release soon? I could look into it later today.

[benjamincanac]

I haven't planed to make a release in the coming weeks no, maybe at the beginning of January so there's no rush 😊

[ineshbose]

Sure - that fix should be included now. Still not sure about duplicate options - possibly another PR for it!

[benjamincanac]

Thanks 😊 Just tested it out and there is indeed an issue with duplicates but also when creating a second one, it deselects everything else. Do you want me to take a look?

CleanShot.2023-12-14.at.10.50.09.mp4

[ineshbose]

Yeah if you can - I can't figure it out. Could give it another try over the weekend, but if you crack it before me - great! 😄

[benjamincanac]

I've updated your PR but starting from scratch. I added a new showCreateOptionWhen prop instead of altering the existing boolean. I didn't stick with the node render also. Let me know what you think!

The options were unselected on second create because the id was missing in the example https://github.com/nuxt/ui/pull/1080/files#diff-e48cbf82e89bfa293e6057d3afcf0716f5568c61e32ed85966cd0ca3b6d3dec5R26

[ineshbose]

Sure thanks.

My personal preference would go for reusing/expanding existing props, else there's a bigger ladder of props to maintain I think; same for VNodes when we may want to reuse the template and provide yet another prop for placement of create button at top of list or bottom, for example.

This is fine too, happy to have the functionality implemented - as long as it's good to you @benjamincanac 🙂

[benjamincanac]

The idea behind this new prop it that it defaults from the app config so users can choose to apply this behaviour to all the creatable select menu in their app.

I would also agree for the VNodes if it was done like this everywhere else. I just favor code consistency across components 😊

[ineshbose]

Good point. LGTM!