search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
444 stars 99 forks source link

Option: `disabled` prop completely hides the option #3114

Closed jens-ox closed 2 years ago

jens-ox commented 2 years ago

A typical pattern for select fields is to set the default option both to disabled and selected:

<select>
  <option value="" selected disabled>Select...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Building this with OpenUI5 won't work, as disabled will just hide the element. Instead, the first remaining option will be selected.

MarcusNotheis commented 2 years ago

Thanks for reaching out! This behaviour is intended according to the Fiori Design Specification:

Do not disable values. In most cases, it is completely unclear how to enable them. Hide the values instead.

We've also received a very similar issue last year that has been closed with the reasoning: https://github.com/SAP/ui5-webcomponents/issues/3731

jens-ox commented 2 years ago

That's quite an interesting decision for a design spec - hiding instead of disabling elements surely makes sense in a lot of cases, but I'm not sure if it fits for select elements.

I also couldn't find another component library that does it this way - Material UI, Radix, Chakra UI, Ant Design and React Bootstrap for example will display disabled options as disabled, just like the default select element does in all browsers.

See also the HTML Spec that states that disabled options should be non-interactive, not hidden.

MarcusNotheis commented 2 years ago

To be very honest: I'm not the biggest fan of this design decision as well because it's very unintuitive for web developers. You can try to post the question at the Fiori Design Community, maybe we can try to update the design specs :)