calcite-select: Allow having no initial value

[jgibson02]

Description

It is sometimes useful to have no initial value for a select to coerce the user to make an explicit decision. Currently this seems to not be supported by calcite-select since it seems to always be initialized with the first calcite-option child's value if value is undefined and no calcite-option is selected. In plain HTML, <option hidden disabled /> might be used, however doing <calcite-option hidden disabled /> still causes it to be visible in the menu.

Acceptance Criteria

• When no value is set, and no calcite-option is selected, the calcite-select renders its placeholder and does not initialize itself with a default value

Relevant Info

No response

Which Component

calcite-select

Example

https://codepen.io/arjan_esrinl/pen/ZEmgaVv

[macandcheese]

This one's tough as we match native behavior and there is no native placeholder attribute.

The single-select combobox could accomplish this:

<calcite-combobox placeholder="Select a value" selection-mode="single">
    <calcite-combobox-item value="Engineering" text-label="Engineering"></calcite-combobox-item>
    <calcite-combobox-item value="Architecture" text-label="Architecture"></calcite-combobox-item>
    <calcite-combobox-item value="Construction" text-label="Construction"></calcite-combobox-item>
</calcite-combobox>

Although the above does not allow you to clear selection - not sure if that is desirable for your workflow.

[jgibson02]

@macandcheese what're your thoughts on supporting hidden on a calcite-option to hide it from the list and act like a placeholder akin to the native behavior?

[macandcheese]

That would work - it seems like that works only when hidden is the first option. Maybe we could just render that internally based on the presence of an (added) placeholder attribute? Would be open to either option there.

[jgibson02]

If it only works for the first option, then your suggestion certainly sounds cleaner to me rather than adding a hidden prop and depending on documenting that behavior.

[macandcheese]

@jcfranco @benelan thoughts on re-triaging this or considering having a placeholder affordance for a select? It could be a bit of a break from native behavior but it seems like we keep getting requests for it as well.

[ReneU]

+1 We need this to allow having no initial value for some components in ArcGIS Velocity. We have some required fields that don't allow for good defaults such as this one:

[ReneU]

@macandcheese @jcfranco @benelan are there any plans to support this in one of the upcoming releases? We have a lot of UIs in ArcGIS Velocity we would like to migrate but this is the only issue blocking us from doing so since we don't want to have a mixed experience (UI controls from different component libraries on the same page).

[jcfranco]

Would using an 'empty' option work in the meantime? https://codepen.io/jcfranco/pen/oNqMBRJ?editors=1010

it seems to always be initialized with the first calcite-option child's value if value is undefined

Assuming ☝️ was fixed, would this address this issue or are there additional functional differences from the MDN example?

[ReneU]

@jcfranco yes, I think we could go with the 'empty' option for now. Thank you.

It seems like it's still getting initialized with the first calcite-option child's value if value is undefined. However, it looks like this matches the native behavior. I guess that's not a blocker for us and we could implement a workaround.

The only remaining thing that would be great to have (and is a functional difference) is the hidden prop, as discussed above.

[github-actions]

It looks like this issue is missing some information:

• A codepen, codesandbox, or jsbin that reproduces the issue. Alternatively, a documentation sample can be used if the issue is reproducible. If you are experiencing build or Node related errors, please provide a GitHub repo for the sample.

Issues without reproduction samples may not be prioritized. If you were unable to create a sample, please try to answer any questions that arise once development begins. Thanks for your understanding.

[geospatialem]

• An example where the innerText is used where the value is "": https://codepen.io/arjan_esrinl/pen/ZEmgaVv
• And a workaround with normalization: https://codepen.io/jcfranco/pen/oNQKdEg

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.9.0-next.5.