SelectOption PF React component could allow displaying tooltip even when disabled

[hstastna]

trafficstars

Requesting new features, enhancements, or design changes to PatternFly

There's a problem related to SelectOption PF React component we use: SelectOption is implemented the way that if isDisabled property is true, it does not allow us to display tooltip even when we can specify it (will be displayed only if the component won't be disabled). Yes, we can force its style to look like disabled while enabled, but we don't want to let it be clickable (in case it should be disabled). And that's kinda problematic, especially if we want this behavior only for one of the selectable options from the drop down.

Hence I suggest to make the component able to display the tooltip no matter the value of isDisabled prop, so we could achieve something like this easily:

Issue in CVN UI related to the component: https://issues.redhat.com/browse/CNV-39558

[hstastna]

Hello PatternFly team, any update about this ticket? Thanks.

[adamviktora]

@hstastna Hello, you can use isAriaDisabled prop on the SelectOption.

This way you will achieve the disabled styling, the option won't be selectable and the Tooltip can be attached.

(Also screen readers can see the option when using isAriaDisabled unlike when isDisabled is used)

[hstastna]

@adamviktora Thank you! Anyway, it would be good to add this info to https://pf5.patternfly.org/ (Select component seems to be missing there, too). Thanks again! :)

[adamviktora]

@hstastna No problem. Sure, we can add the isAriaDisabled option directly to the Select documentation.

Btw I think you are using an old URL. The Select component is now under Menu folder, this is the correct link: https://www.patternfly.org/components/menus/select.

In this Menu example you can see the variations including the isAriaDisabled, but I agree it could be shown directly in this Select example

[hstastna]

@hstastna No problem. Sure, we can add the isAriaDisabled option directly to the Select documentation.

Btw I think you are using an old URL. The Select component is now under Menu folder, this is the correct link: https://www.patternfly.org/components/menus/select.

In this Menu example you can see the variations including the isAriaDisabled, but I agree it could be shown directly in this Select example

Thank you so much for the provided information, I'll check that :) You know, recently we've upgraded our UI to use PatternFly 5 so I considered to better look at the page for version 5 explicitly :)

[andrew-ronaldson]

Thanks @adamviktora for following up. Is there anything we need to do with this issue or can I close it?

[adamviktora]

You can close it. I opened a React followup to add a better example.