Can you expand on how the options assign works? Is this a set of options that will always be there, regardless the text you’ve typed in the text input field? Or will it be replaced as soon as you trigger the hook that returns options? Or is this set of options somehow searched through, and mixed with the options that are returned dynamically? Sorry for the lazy question, I know it’s all in flux right now…
linusdm
0
trisolaran
Hi @linusdm ! No worries, perfect timing in fact 
Is this a set of options that will always be there, regardless the text you’ve typed in the text input field? Or will it be replaced as soon as you trigger the hook that returns options?
The latter
I just finished the changes to enable setting an initial selection, either implicitly from the form or explicitly with the value option. It’s in master. Please try it out if you can. Any questions, comments, or bugs, please post them in the github issue. Thanks!
0
trisolaran
Published 0.3.3
- set initial selection from the form or manually with
valueoption - set initial list of available options with
optionsoption - add a
max_selectableoption to limit the maximum size of the selection
Also deployed showcase app at: https://live-select.fly.dev/ (thanks @linusdm for reminding me)
4
jaimeiniesta
Thanks for this library, it looks great.
I’d like to try if as a tagging interface as in Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2 · FullstackPhoenix - but there’s something missing to my understanding.
Can the user enter new values by pressing enter? I think that’s not possible currently.
0
trisolaran
Can the user enter new values by pressing enter? I think that’s not possible currently.
Yes it’s possible. You can either use the arrow keys to navigate to the entry in the dropdown and hit enter - or you can click on the entry. You can test this in the showcase app.
0
jaimeiniesta
Thanks, but I still think it’s not possible to add new entries that are not in the original options, please see this video I recorded:
Here, in :tags mode, I can enter “Seattle” and select it as it’s in the options, but if I want to add a new one, like “Monreal”, I can’t add it to the list. Am I missing something?
0
jaimeiniesta
I think it’s a matter of using update_options with the text from the ChangeMsg via handle_info, or just live updating the options.
I’ll see if I can get that done from the examples, thanks.
0
trisolaran
Nope, you’re very much correct. You can’t currently add new entries not present in the options. I misunderstood your original question, sorry.
So it would be something like a “dynamic option mode”, where if you hit enter whatever you have typed will become a new selected option. I think this is an interesting use case, at least another person mentioned it during a conversation.
If you could create an issue on github with a short description, that would be great! I’m sure it won’t be hard to implement.
1
jaimeiniesta
Cool, I just created the issue Add new option dynamically · Issue #11 · maxmarcon/live_select · GitHub
Thanks!
1
trisolaran
Version 0.4.0 is out
Here’s the new stuff:
- a new
available_option_classconfiguration option to style options that have not been selected yet - a new
user_defined_optionsconfiguration option to allow users to enter any tag - ability to assign a custom id to the component
- ability to programmatically clear the selection using the
clearassign - a new
allow_clearconfiguration option. If set, a tinyxbutton will appear in the text input in single selection mode. Clicking the button clears the selection.
LiveSelect.update_options/2 has been deprecated in favor of using LiveView.send_update/3 directly. This is the first step towards a planned version 1.0.0 , which will expose LiveSelect as a function component and use events instead of messages for the update loop. In this way it will be easier to use LiveSelect from within another live component, such as the form components created by the new phx.gen.live generators.
Thanks to @jaimeiniesta and @KristerV (plus 2 other GitHub users I can’t find here ) for their feedback and suggestions.
7