[Bug]: DatePicker's property allowTextInput doesn't work when inside of the Drawer in overlay mode

[antonbubel]

Component

Accordion

Package version

9.56.2

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i7-10870H CPU @ 2.20GHz
    Memory: 16.09 GB / 31.76 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @fluentui/react-components: ^9.0.0 => 9.56.2
    @fluentui/react-datepicker-compat: latest => 0.4.55
    @fluentui/react-icons: latest => 2.0.266
    @types/react: ^17 => 17.0.83
    @types/react-dom: ^17 => 17.0.25
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1

Current Behavior

When the DatePicker component is inside of the Drawer component that is in overlay mode and the allowTextInput property of the DatePicker is set to true, the user input is not available as the focus shifts out of the date input when the user clicks on the datepicker the second time.

This not only disables the user input when it's inside the Drawer element, but the user is also unable to clear the date input.

Expected Behavior

A DatePicker supports user input. Clicking the input field will open the DatePicker, and clicking the field again will dismiss the DatePicker and allow text input. When using keyboard navigation (tabbing into the field), text input is allowed by default, and pressing Enter will open the DatePicker.

Reproduction

https://stackblitz.com/edit/nmw1tv

Steps to reproduce

Setup:

1. Create a Drawer element in an overlay mode
2. Put a DatePicker element that accepts user input inside of the Drawer conent

Steps to reproduce:

1. Open Drawer that contains a DatePicker in its content
2. Click on the date input field (DatePicker) - a date picker should appear (expected)
3. Click on the date input field a second time - dismisses the date picker (expected) and removes the focus from the field (not expected)

See a Stackblitz reproduction which demonstrates the bug: https://stackblitz.com/edit/nmw1tv

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[sopranopillow]

I can repro, but this is pretty flaky. Focus is lost and moves to the browser, then the content is unreachable on tab or shift tab. I did notice that if you open the picker with the keyboard and close it with escape clicking works again 🤔This will need further investigation, but I suspect it's something coming from Dialog.

Recording.2024-11-26.110358.mp4