[Bug]: Pressing escape within a SearchBox that is within a Dialog component forces the Dialog to close

[labibhussain]

Component

SearchBox

Package version

9.58.3

React version

18.2

Environment

  System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 53.94 GB / 62.79 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  npmPackages:
    @types/react: ^18.2.0 => 18.3.3 
    @types/react-dom: ^18.2.0 => 18.3.0 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 

Current Behavior

In a component where a FluentUI SearchBox is inside of a FluentUI Dialog, pressing escape causes the Dialog to close when focused on the SearchBox.

Expected Behavior

Pressing escape should only clear the searchbox if the searchbox is focused.

Reproduction

https://stackblitz.com/edit/emqejvde-v1bsuhx9?file=src%2Fexample.tsx

Steps to reproduce

1. Go to stackblitz: https://stackblitz.com/edit/emqejvde-v1bsuhx9?file=src%2Fexample.tsx
2. Click on open Dialog
3. Focus on the Searchbox
4. Press 'esc'

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.

[pragadeesh47]

Hi!
I'd like to work on this issue. Could you please confirm if it's still available for me to take on? Thanks!

[sopranopillow]

@pragadeesh47, it's available, feel free to create a PR if you would like to :)

[pragadeesh47]

@pragadeesh47, it's available, feel free to create a PR if you would like to :)

"Great, I’ll work on the PR and submit it soon!"