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.

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

[Bug]: Cannot choose date from Datepicker calendar inside a modal dialog #33705

Open
2 tasks done
15MariamS opened this issue Jan 22, 2025 · 3 comments
Open
2 tasks done

Comments

@15MariamS
Copy link

15MariamS commented Jan 22, 2025

Component

Other...

Package version

^9.56.5 (react-components), ^0.4.61 (react-date-picker-compact)

React version

18.3.1

Environment

System:
    OS: macOS 15.1.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 93.53 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 18.1.1
  npmPackages:
    @fluentui/react-components: ^9.56.5 => 9.56.5 
    @fluentui/react-datepicker-compat: ^0.4.61 => 0.4.61 
    @fluentui/react-icons: ^2.0.264 => 2.0.264 
    @fluentui/react-list-preview: ^0.4.4 => 0.4.4 
    @types/react: ^18.3.12 => 18.3.12 
    @types/react-dom: ^18.3.1 => 18.3.1 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1

Current Behavior

I have a dialog (modalType is modal). I am unable to choose a date from the Datepicker inside of this dialog since the calendar component does not focus any longer.

Image

Expected Behavior

I can choose a date from the datepicker.

Reproduction

https://stackblitz.com/edit/esfx6nr1?file=src%2Fexample.tsx

Steps to reproduce

The Stackblitz example works as expected, but I'm not sure how it's different than my current setup (other than it's a simplified version of it since I have a general wrapper around the dialog and date picker for consistent use across my product). Would welcome any clues on what could be causing the focus issue shown in the screenshot above.

  1. Click "Open dialog"
  2. Click "Select a date"

Are you reporting an Accessibility issue?

no

Suggested severity

High - No 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.
@bsunderhus
Copy link
Contributor

I cannot open reproduction link @15MariamS 😟

@15MariamS
Copy link
Author

I cannot open reproduction link @15MariamS 😟

updated!

@mainframev
Copy link
Contributor

@15MariamS

Hi 👋🏻

Unfortunately, it's still hard to say what's wrong as the reproduction works as expected. On the screen you shared, there is even stylings are broken, but that maybe similar to #31275 and not related to why you still can't select.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants