Add API To change Selected Value

[kapilpipaliya]

I want to change the selected value from outside.
Please provide api to change selected value.
Thank you.

[martinpengellyphillips]

I'm guessing you mean on the component?

(The underlyingcreateSelect has a setValue in case you are building a custom control).

What's your use case? Would makinginitialValue prop reactive work?

[kapilpipaliya]

I want to add clear button to the select input. when I press it selected value should be cleared. I think making initialValue reactive will work.

[martinpengellyphillips]

Makes sense. Feel free to issue a PR. Alternatively, I'll take a look at implementing this in the future.

[timothyallan]

Having it recognize a selected prop on the option would also allow Solid Select to work with forms libraries like Felte https://github.com/pablo-abc/felte/blob/main/packages/common/src/utils/domUtils.ts#L173

[martinpengellyphillips]

Interesting, but I think interop with something like Felte would be a separate feature.

I'd expect in most cases to wrap Solid Select for use in a particular form library (or use custom components with the underlying createSelect primitive / component building blocks).

In this case, I don't think it would make sense to support selected on the option as it would imply being able to set it also to control the value, but the current component is geared more towards a single control than the composed approach.

[timothyallan]

Fair enough! That said, the boring ol HTML <select> can have its value initially set by selected being present in an option, and according to my first google result from W3Schools, can also be used to control the value as well, as long as you have "a JavaScript" :)

[martinpengellyphillips]

Yeah, but the default Solid Select component doesn't give you direct access to the option components:

<Select options={...} />

So where would you set this?

(Of course you can compose your own component out of the building blocks, but then you could also add this behaviour too).

[timothyallan]

Personally I'd just set it in the createMemo() that delivers the options I'm providing to Solid Select, keep that as the source of truth for both the App + SS.

[martinpengellyphillips]

Ah, I thought you meant a selected prop on each option component. But now I think you mean something on the options data structure passed in?

[timothyallan]

Yeah, by options I was thinking about the options prop that SS takes in, which I mentally equate with the <option> that an html <select> takes. i.e. the equivalent of something like {label:'abc', value:'def', selected:true} however, what I forgot was that all falls apart with a 3rd party library trying to set the selected option, as it would require the component to expose the options like you mentioned above, sigh. Composing a custom component looks like the best option at this point!

[swizzley]

Not sure if this is the same issue or not, but I'm running into a similar issue where I want to set the initialValue dynamically from an onChange function in another select component. It sounds like this is not reactive and not possible in the current version, is that true?

[martinpengellyphillips]

@swizzley That's correct for the Select component (the underlying createSelect does expose a setValue API).

I think the best approach is to make the initialValue reactive in the Component (so a little effect to call the underlying select.setValue rather than passing straight through as an option to createSelect). Happy to accept a PR here, otherwise I might take a look this weekend.