Internal issue 2999 - The Select web component is missing an options attribute

[ticket-sync[bot]]

When using the Select component in its Web Component form, not the React variant, there is no options attribute. There is only an options property, which prevents us from supplying the component with options in server-side templates. Although we would have to encode the object as JSON to pass it in, and the component would have to decode the JSON to receive the options, we need such an attribute to utilise the component in Java JTE templates with the HTMX library.

[ad9242]

This is down to a limitation with StencilJS: https://stenciljs.com/docs/properties#object-props

[tg840104]

@ad9242, I appreciate Stencil does not process object-props itself but does that prevent us from deserialising a POJSO from a JSON string inside the component?

"The reason for this is that Stencil will not attempt to serialize object-like strings written in HTML into a JavaScript object. Similarly, Stencil does not have any support for deserializing objects from JSON. Doing either can be expensive at runtime, and runs the risk of losing references to other nested JavaScript objects."

I am unsure why this would be more expensive from the application's perspective than locating the component in the DOM and supplying the actual object via a property. My project is attempting to minimise JS code in favour of server-side templates so would prefer if the component could supply at attribute, even if that meant supplying the object serialised to JSON.

[ad9242]

The solution you suggest does make the most sense, and is most likely the way it would get implemented.

We also have to be conscious that undertaking this work will create the expectation that this pattern will work for all components that support object\arrays as props and factor in what kind of effort that will involve.

Unfortunately we don't have capacity in the core team to work on this in the short term, hence the team decision on the planned milestone. However, we would welcome a contribution into the v3 codebase to resolve the issue sooner.

[tg840104]

An alternative approach might be to use the default slot to accept ic-menu-item elements, as per the ic-popover-menu, which is arguably a more complicated configuration.

[tg840104]

Another option would be to consider referencing a datalist element.

Please consider this.