Selection stuck on the first option

[excursus]

Trying out the demo on https://solid-select.com/, I noticed that the first option always receives data-focused=true regardless of user choice. The onChange event does reflect that choice but the UI does not. Is there some way to get the UI to show the user's selection?

[marko-mihajlovic]

This definitely needs to be fixed in future versions. Until then, here is a hacky solution, which uses 'isOptionDisabled' prop in order to focus selected item:

import { Component, createSignal } from 'solid-js';
import { Select } from '@thisbeyond/solid-select';
import '@thisbeyond/solid-select/style.css';
import './custom_style.css';

export default () => {
    const [selected, setSelected] = createSignal();

    return (
        <Select
            options={['apple', 'banana', 'pear', 'pineapple', 'kiwi']}
            isOptionDisabled={(option: string) => option === selected()}
            onChange={(option: string) => setSelected(option)}
        />
    );
};

custom_style.css:

.solid-select-option[data-focused='true'] {
    @apply bg-transparent;
}

.solid-select-option:hover {
    @apply bg-gray-200;
}

.solid-select-option[data-disabled='true'] {
    @apply bg-gray-100;
}

[martinpengellyphillips]

Do you mean you want it to auto-highlight the matching option in the options list for the current value?

[marko-mihajlovic]

Yes, that's what op means. Take a look at native select, it should behave similarly. Although, unlike native select, I suggest separating logic and style for the 'selected' and 'focused' option.

[MarByteBeep]

Any news on this one? I'm using the above hack as well. It would be great if the selection option is highlighted (instead of always the first one) and if the list scrolls such that the selected option is in view (instead of always showing the top of the list).

[martinpengellyphillips]

Going to look at this in the coming weeks.