carbon
carbon copied to clipboard
Sage
Inputs can still be interacted with even when hidden behind a sticky Box
Current behaviour
This is a follow-up to #5572
Although that was fixed using a z-index, the fix is only visual - you can't see the inputs any more. However, they can still be clicked on - potentially a concern in that this can be done accidentally and where the user has no visual feedback that anything happened.
To reproduce, go to the codesandbox below (which is just a copy of the one from the original bug report, but using the latest Carbon version which has the visual fix in it). Scroll so that the radio buttons have just gone "behind" the sticky panel. If you hover your mouse over where one of the buttons "would be" you will see the mouse cursor change to the hand which indicates it is over an interactable element. And if you click the mouse here, the radio button is selected (as can be confirmed by then scrolling so it is in view again).
Expected behaviour
Element which are invisible should not be possible to be interacted with using the mouse - in particular it should not be possible to click "through" a covering element.
CodeSandbox or Storybook URL
https://codesandbox.io/s/brave-bouman-2gttxp?file=/src/App.tsx
JIRA Ticket (Sage Only)
No response
Suggested Solution
No response
Carbon Version
latest
Design Tokens Version
No response
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
MacOS
Anything else we should know?
When fixing this we should add a Cypress/Playwright test to cover it. (As well as unit tests if feasible.) This is possible in Playwright by using the evaluate method to call getBoundingClientRect on the radio button to get its position relative to the viewport, then passing these co-ordinates into page.mouse.click. The test can then verify that a click here does not leave the radio button checked.
(I am happy to do this a less complicated way if there is one - but if not I have already demonstrated that the above approach works.)
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
