Should SlimSelect's selection reflect changes in a HTMLSelectElement's value?

[unilynx]

Using SlimSelect in projects that previously used native selects (or a homegrown 'pulldown replacement') I'm used to manipulating the HTMLSelectElement options, selectedIndex and value property etc in code and CI tests. This doesn't always work with SlimSelect (eg. #646, #651) although some issues are easily fixed

Right now I'm running into issues updating the HTMLSelectElement.value - SlimSelect's UI doesn't reflect the changes (and sometimes even seems to undo value updates, but I haven't fully debugged it to confirm)

Is it within SlimSelect's scope to attempt to support the native API as much as possible? I know it can be implemented (I've done it before) but not with MutationObserver - you're crossing the line into Object.defineProperty territory, modifying the actual select elements.

Or is the (understandable) answer: SlimSelect's not going there, just use setSelected.

PS: I think I'm also seeing form.reset() not resetting the SlimSelect properly, but that might also be out of scope

[unilynx]

and as to: "why would you even want to do go through all this trouble" - the primary use case is making the use of SlimSelect (or any <select> replacement) optional - eg I might not want to activate SlimSelect on mobile but prefer the native component there. And then it's nice to have only one API to deal with in JS

[brianvoe]

I dont know that i fully follow. Slim select has mutation observers that looks for any select or options changes and updates. If you have a scenario in which that isnt happening just let me know.

[unilynx]

I've setup a pen to show it: https://codepen.io/unilynx/pen/YPqxMRV

to summarize:

• selectcontrol.value = "2"; is not picked up after SS is initialized
• selectcontrol.selectedIndex = 3 same
• document.getElementById("form").reset() should reset the value back to the original HTML form but doesn't. 🐞 Bug: select does not reset when using button type="reset" #627 apparently didn't fix it

Slim select has mutation observers that looks for any select or options changes and updates

Mutation observers can't see changes to properties that are not specified to reflect their value back into the HTML DOM, and the value attribute doesn't. Presumably to be able to implement reset() but I'd need to read the specs a lot closer to find the nuances.

The only method I know of (other than polling) is to override the value property's setter.

(PS: Although the reset issue might be fixed by looking at the DOM's state if SlimSelect doesn't mutate that given the reset algorithm from the spec: 'The reset algorithm for a select element selectElement is: ... If optionElement has a selected attribute, then set optionElement's selectedness)

[brianvoe]

ok i see. if the mutation observer doesnt pick up the change then there is not much i can do. i would say SlimSelect does its best to accomidate for as many situations as it can. If there is anything else i can account for ill try but i also cant add a bunch of polling checks for things.