Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

tooltip property on disabled DropdownItem does not work #4581

Closed
KKoukiou opened this issue Jul 20, 2020 · 11 comments
Closed

tooltip property on disabled DropdownItem does not work #4581

KKoukiou opened this issue Jul 20, 2020 · 11 comments

Comments

@KKoukiou
Copy link
Collaborator

tooltip property on disabled DropdownItem does not work

      <DropdownItem key="disabled link" tooltip={<Tooltip>test</Tooltip>} isDisabled description="Disabled link description">
        Disabled Link
      </DropdownItem>

So the above code snippet will not show any tooltip.

Probably related to #1894
@tlabaj
Copy link
Contributor

tlabaj commented Jul 20, 2020

@KKoukiou can you please tell me what version of patternFly React you are using.

@KKoukiou
Copy link
Collaborator Author

@KKoukiou can you please tell me what version of patternFly React you are using.

@patternfly/react-core": "3.158.1",

@martinpitt martinpitt mentioned this issue Jul 21, 2020
Merged
1 task
martinpitt added a commit to martinpitt/cockpit that referenced this issue Jul 21, 2020
@martinpitt
machines: Port remaining PF3 Tooltip
2cdf0ca 
This was forgotten in PR cockpit-project#14195

Don't use  DropdownItem's `tooltip=` property as that does not work [1].
Wrap it in a Tooltip instead.

[1] patternfly/patternfly-react#4581

Closes cockpit-project#14381
martinpitt added a commit to cockpit-project/cockpit that referenced this issue Jul 21, 2020
@martinpitt
machines: Port remaining PF3 Tooltip
b0ff3e5 
This was forgotten in PR #14195

Don't use  DropdownItem's `tooltip=` property as that does not work [1].
Wrap it in a Tooltip instead.

[1] patternfly/patternfly-react#4581

Closes #14381
@KKoukiou
Copy link
Collaborator Author

@KKoukiou can you please tell me what version of patternFly React you are using.

@patternfly/react-core": "3.158.1",

Same happends with "@patternfly/react-core": "4.32.1",

@jschuler
Copy link
Collaborator

That is probably to be expected, since disabled elements do not emit hover events. I believe @seanforyou23 did some research in this area and found a solution for another component

@jschuler
Copy link
Collaborator

Here's one possible workaround in the meantime:
Give your dropdown item an ID:

<DropdownItem id="disabledItem" key="disabled link" isDisabled description="Disabled link description">
        Disabled Link
      </DropdownItem>,

Since "@patternfly/react-core" 4.32.8 Tooltip has a reference prop you can use:

<Tooltip content="test" reference={() => document.getElementById('disabledItem')} />

Then you should always get the tooltip

https://codesandbox.io/s/restless-night-s2mze?file=/index.js

@KKoukiou
Copy link
Collaborator Author

Here's one possible workaround in the meantime:
Give your dropdown item an ID:

<DropdownItem id="disabledItem" key="disabled link" isDisabled description="Disabled link description">
        Disabled Link
      </DropdownItem>,

Since "@patternfly/react-core" 4.32.8 Tooltip has a reference prop you can use:

<Tooltip content="test" reference={() => document.getElementById('disabledItem')} />

Then you should always get the tooltip

https://codesandbox.io/s/restless-night-s2mze?file=/index.js

Thanks for the workaround, it also works if you wrap the component with the tooltip instead of passing the tooltip prop:

                <Tooltip content='test'>
                    <DropdownItem isDisabled>
                       Delete
                    </DropdownItem>
                </Tooltip>

@tlabaj tlabaj modified the milestone: Prioritized Backlog Aug 12, 2020
@stale
Copy link

stale bot commented Oct 11, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@stale stale bot added the wontfix label Oct 11, 2020
@wsamsnyder wsamsnyder mentioned this issue Nov 11, 2020
Closed
@stale stale bot closed this as completed Nov 21, 2020
@KKoukiou KKoukiou reopened this Nov 21, 2020
@stale stale bot removed the wontfix label Nov 21, 2020
KKoukiou added a commit to KKoukiou/cockpit that referenced this issue Feb 19, 2021
@KKoukiou
testlib: when checking disabled attribute always check aria-disabled
87405f3 
PF4 allows us to use both, and that because elements with 'disabled' don't work with tooltips.

See: patternfly/patternfly-react#4581
and https://pf4.patternfly.org/components/button#aria-disabled

This commit ensures testlib is aware of both ways that elements get disabled.
martinpitt pushed a commit to cockpit-project/cockpit that referenced this issue Feb 20, 2021
@KKoukiou @martinpitt
testlib: when checking disabled attribute always check aria-disabled
22d1237 
PF4 allows us to use both, and that because elements with 'disabled' don't work with tooltips.

See: patternfly/patternfly-react#4581
and https://pf4.patternfly.org/components/button#aria-disabled

This commit ensures testlib is aware of both ways that elements get disabled.
thomasvandenbosch13 pushed a commit to thomasvandenbosch13/cockpit that referenced this issue Apr 12, 2021
@KKoukiou @thomasvandenbosch13
testlib: when checking disabled attribute always check aria-disabled
07dec2c 
PF4 allows us to use both, and that because elements with 'disabled' don't work with tooltips.

See: patternfly/patternfly-react#4581
and https://pf4.patternfly.org/components/button#aria-disabled

This commit ensures testlib is aware of both ways that elements get disabled.
@mcoker mcoker mentioned this issue May 24, 2021
Closed
@stale
Copy link

stale bot commented Jun 1, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@tlabaj
Copy link
Contributor

tlabaj commented Jun 2, 2021 •
edited
Loading

this issue will be cover by issue #5826

@stale
Copy link

stale bot commented Aug 1, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

@stale stale bot added the wontfix label Aug 1, 2021
@cben cben mentioned this issue Aug 2, 2021
Closed
@cben
Copy link
Contributor

cben commented Aug 9, 2021

Dup of #5826 (not 5286). Solved now — use latest packages to include #6038 and use isAriaDisabled instead of isDisabled. #6109 remains about screen readers but not related to disabling.

(Similar support for isAriaDisabled is available on some other components e.g. Button, ref #1894 for the big picture)

@stale stale bot removed the wontfix label Aug 9, 2021
@tlabaj tlabaj closed this as completed Oct 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@cben @jschuler @KKoukiou @tlabaj