Skip to content

selected_option_class does not work for :single mode #104

@FranzVDB

Description

@FranzVDB

LiveSelect and LiveView versions
have you tried LiveSelect's and LiveView's latest versions? Please try them and see if the bug still occur

which LiveSelect version are you on?
{:live_select, "~> 1.0"}, but the showcase app fails too

which LiveView version are you on?
{:phoenix_live_view, "~> 0.20.17"}

Describe the bug
When an options is selected and you reopen the container with the options, the selected_option_class is not working. From what i can see by logging inside the component.ex and the component.html.heex files selection does get set correct when choosing a option, but when you reopen the options and the:

cond do already_selected?(option, @selection) -> class(@style, :selected_option, @selected_option_class)
code runs, @selection is empty resulting in it not being applied.

Expected behavior
What were you expecting to happen?
I expected the selected option to have a red background

Actual behavior
What is actually going on instead?
The selected option has no red background and you can't see what the user has selected already.

Screenshots
If applicable (in most cases it is), do add a screenshot (or even better, a GIF or a video) that describes the problem.

Image

Image

Image

Image

Image

Screen.Recording.2025-02-18.at.09.12.50.mov

Browsers
On which browsers did you notice the issue?
Using Arc (chromium)

Issue Repo
You have the best chances of someone fixing the issue if you include a minimal repo that reproduces the problem.

https://live-select.fly.dev/?allow_clear=false&debounce=90&disabled=false&mode=single&option_class=bg-blue-200&options_styled_as_checkboxes=false&placeholder=Search+for+a+city&search_delay=5&selected_option_class=bg-red-500&show_styles=true&style=tailwind&update_min_len=1&user_defined_options=false

Additional context
I

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions