content disappears on click - add allow_clear setting to make single-mode option clearable

[KristerV]

To reproduce

1. select a value from dropdown
2. deselect input
3. click on the input
4. notice the value disappeared
5. unfocus input
6. notice value is permanently gone

expected behaviour

once the user selects a value it should not disappear, only change to a new value if user selects it.

Demo video

https://imgur.com/VkZnTpL

Demo repo

i made a repo where this exists built on top of Phoenix 1.7 RC2 and it's LiveView generators.

https://github.com/KristerV/live_Select_bug

[maxmarcon]

Thanks for the report and the repo.

I hope I understood your issue correctly.

What you're seeing is expected. If you select "United States" and then click again on the input, live select thinks you want to enter a new value and so it deselects the existing one.

Is your expectation that the last selection is always retained until the user selects something else? Wouldn't this make it impossible to unselect a value after you selected something? Imagine dealing with an optional country field. You can enter a country, or you can leave it blank. Imagine you selected a country and then change your mind and want to clear the field, right now all you have to do is click on it.

Thoughts are welcome!

[maxmarcon]

we could make this behavior optional, btw

[KristerV]

you've nailed it. i do have a required field and once you select something it doesn't make sense to unselect it.

an example to illustrate better is a select for timezones. i choose one and then think "wait, was there something better for me, perhaps they have my city exactly?" so i click on it to go looking for options, but maybe there are none and i'd like to keep whatever i had selected already.

i thought that's how drowdowns work by default. you can make the field empty by going to find the empty value at the top. i know i've done that on prupose multiple times (i go find the "Choose one" value).

[maxmarcon]

Yes the use case you're describing with timezones is quite compelling. I want to see if there is a better option, but not necessarily undo my current selection.

So maybe we could remove the "deselect on click" behavior. Question is how to allow the user to unselect. One way would be to click on the input and then hit enter without entering any text.

Even better: we could do what select2 does. See "clearable selection" section.

[maxmarcon]

@KristerV let me know if you like it this more:

https://live-select.fly.dev/?allow_clear=true&debounce=100&disabled=false&field_name=city_search&form_name=my_form&max_selectable=0&mode=single&placeholder=Search+for+a+city&search_delay=10&show_styles=false&style=tailwind&user_defined_options=false

Now clicking on the selection temporarily clears it, allowing you to search for a different option. If you abandon the search by blurring the input field or pressing the "Escape" key, the old selection reappears.

And there is an allow_clear option which, if set, renders an "x" button on the text input. Pressing the button clears the selection

[KristerV]

Dude, perfect! Very comfy and makes intuitive sense including the x, nice add!

The name doesn't seem to describe the outcome exactly. How about show_clear_button? Or allow_nil. Or required_field. Hmm. I guess the original is also okay, pretty hard thinking of a name.

On Sun, Jan 29, 2023, at 14:30, Max wrote:

@KristerV https://github.com/KristerV let me know if you like it this more:

https://live-select.fly.dev/?allow_clear=true&debounce=100&disabled=false&field_name=city_search&form_name=my_form&max_selectable=0&mode=single&placeholder=Search+for+a+city&search_delay=10&show_styles=false&style=tailwind&user_defined_options=false

Now clicking on the selection temporarily clears it, allowing you to search for a different option. If you abandon the search by blurring the input field or pressing the "Escape" key, the old selection reappears.

And there is an "allow_clear" option which, if set, renders a "x" button on the text input. Pressing the button clears the selection

— Reply to this email directly, view it on GitHub https://github.com/maxmarcon/live_select/issues/13#issuecomment-1407664416, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAU7RHW7IFTYKTV5SPN54NDWUZWGVANCNFSM6AAAAAAUGAAHPU. You are receiving this because you were mentioned.Message ID: @.***>

[maxmarcon]

Yes names are always hard.

TBH, even though I don't love allow_clear, I don't find the other names better. "Allow clear" is the same name that select2 uses for this option.

It's documented, so I guess it's ok. The documentation will make it clear.

[maxmarcon]

closed with cfe713254341da1e45a677aa57d3f40b66cafec6