This repository was archived by the owner on Mar 27, 2023. It is now read-only.
Clarity Combobox: make <clr-option> diasable-able #6461
Comments
|
Hi @TechScar I think the question is if this leads to better UX or not. This duplicates the information, but it also makes it more explicit in some ways. This is something we'll consider as we redevelop the combobox for Clarity Core! |
|
Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Summary
I would like to have the possibility to disable individual options in the clarity combobox component just like e.g. in a select form. From my understanding, this is not possible to do as of yet.
What is the change?
The
<clr-option>element should be able to take a[disabled]attribute that can be dynamically set via an option item property or another function. This would serve well to give the user visual feedback that an existing option cannot be selected, instead of completely excluding it from the options or immediately removing it from the combobox content again onclrSelectionChange.A disabled option would be visually distinct by e.g. a lower opacity and can not be selected, just like a disabled
<select>option.Why should it go in Clarity?
Since the dropdown of the combobox has a similar appearance and functionality as the native HTML
<select>element, which allows to have a disabled attribute, it only makes sense that the Clarity combobox would offer this too.Does this change impact existing behaviors? If so how?
Disabled options can no longer be selected and are not added to the input.
If this change introduces a new behavior, is this behavior accessible?
It should be accessible in the same way as the HTML
<select>element.Use case
I want to be able to an option options via a custom property when this option has already been selected. I provide all the checking for custom types from the outside already. All I want is make an option unclickable when the parent component has decided that this option already exists in the combobox selection.
TL;DR: disable option that has already been selected. No need for a comparator function, only the disabled field/attribute.
(However it would be quite cool to be able to supply a comparator function for custom objects that the combobox then automatically disables.)
Examples
API
E.g.
<clr-option ... [clrValue]="item" [disabled]="item.disabled">Conclusion
I consider this idea easier to implement than supplying the combobox with a custom comparator function that does the disabling for me. But if anyone feels up to the task, feel free to haha
The text was updated successfully, but these errors were encountered: