Stellar
Stellar copied to clipboard
stellar-select overriding set value with defaults
If I provide default values to the stellar-select component along with the child stellar-inputs the "componentDidLoad" function in stellar-select overrides my set "selected" Boolean in the child stellar-input components. Example: Sorry for the formatting, can't get it to behave
<stellar-select
name={"Selector"}
multiple={true}
default={[1,2,3]}
placeholder="Select an option"
{[1,2,3].map((option) => {
return <stellar-item
wrap
value={option}
selected={option%2}>
{option}
</stellar-item>
})}
</stellar-select>
If my pseudo code does what I think it will, the odd values (1,3) will be selected based on the explicit stellar-item.
This is the componentDidLoad function in stellar-select component:
async componentDidLoad () {
this.listen_to_values();
this.titleItem = this.element.shadowRoot.querySelector('stellar-item[select-title]')
if (this.default) {
if (typeof this.default === "object" && this.default.constructor.name === "Array") {
this.default.forEach((value) => {
// @ts-ignore
this.element.querySelector(`stellar-item[value="${value}"]`).select_item({selected: true})
})
} else {
// @ts-ignore
this.element.querySelector(`stellar-item[value="${this.default}"]`).select_item({selected: true})
}
}
}
In my example I will have a default values ([1,2,3]) and it will be of type "object" and have a constructor name equal to "Array". From there it proceeds to use each element from the default property to select the appropriate stellar-item, based on that value, and call the "select_item" method on the stellar-input. This appears to override the explicitly set "selected" value I have provided.
Is this the intended functionality, have I missed something, am I just doing it wrong?
Thanks, Levi