Can not tab after selecting Change Publish Date button

Smithasage commented 2 years ago

Current behaviour

Cannot able to tab inside the carbon dialog box on click 'Change Publish Date' button.

To navigate to the general area Create a new company > set up pay calendar > Create Employee Pay Run > Select frequency> choose date > next Next on absence screen > next on Payment screen Select Change Publish Date button Attempt to use tab or arrow keys in pop up box

Keyboard keys do not work until the user has mouse clicked into the box. Since dialog is set to disableAutoFocus prop as true.

Expected behaviour

User can use tab and keyboard functionality in the pop up box

CodeSandbox or Storybook URL

https://carbon.sage.com/v/109.2.2/index.html?path=/docs/dialog--focusing-a-different-first-element

JIRA Ticket (Sage Only)

SKPU-5580

Carbon Version

110.1.1

Design Tokens Version

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

What Operating System are you seeing the problem on?

Windows, Linux

Anything else we should know?

No response

Confidentiality

[X] I confirm there is no confidential or commercially sensitive information included.

edleeks87 commented 2 years ago

@Smithasage the link you've provided does not show an issue, you've also said you are using v110.1.1 of carbon but have linked to the storybook using v109.2.2: the storybook demo for both of these versions shows the focus trap is behaving as expected. I've also tested this in a codesandbox and can confirm that as far as I can tell it works correctly. Please amend my sandbox (I've used classes as I understand that is what you are using) to recreate the issues otherwise we cannot investigate.

https://codesandbox.io/s/dazzling-jang-0xls7y?file=/src/index.js

edleeks87 commented 2 years ago

Closing as I don't believe this is a carbon issue, please re-open if you are able to provide a reproducible example that shows it is

Sage / carbon