SearchBox swallows ESC keyDown events, cannot be handled outside

[sachin9996]

Environment Information

• Package version(s): Office UI Fabric React 7.100.0
• Browser and OS versions: Should repro on all browsers

Describe the issue:

The SearchBox component has an onEscape handler that handles what happens when the ESC key is pressed. However this ESC keyDown event doesn't seem to bubble outside the SearchBox.

My use case is a dialog with a SearchBox inside it. When focus is on the SearchBox and there is some input in it, pressing ESC should clear the input (this part works fine and is default SearchBox behavior). But when the SearchBox is empty, pressing ESC should close the dialog, and this is something that needs to be handled at the level of the dialog.

(See linked codepen for more details)

Actual behavior:

The onEscapeKeyDown handler isn't called.

Expected behavior:

The onEscapeKeyDown handler should be called.

If applicable, please provide a codepen repro:

https://codepen.io/sachin9996/pen/gOpQEWo?editors=1111

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No

Requested priority: Normal

Products/sites affected: Power Query Online

[aneeshack4]

@sachin9996 Thanks for reaching out to us. I made a Codepen that has a Dialog with a Searchbox inside to repro your issue and I confirm the repro: https://codepen.io/aneeshack4/pen/NWqEmOx?editors=1010.
Normally pressing ESC does close the Dialog (even when focus is on another element within like a ChoiceGroup, etc) but with this SearchBox it does not until focus is placed elsewhere outside the SearchBox in the Dialog. I think something is missing/order needs to be moved around in the _onClear which is what gets called on ESC. I'll try some stuff out here and see if I can get a fix.

[sachin9996]

Sounds great, thanks for the prompt response!

[sachin9996]

Hey @aneeshack4, any updates on this?

[JustSlone]

@behowell can you investigate this, it is causing issues for partners. Might be as simple as updating SearchBox to propagate (or no longer stop the propagation of) the event. @aneeshack4 might have some context, sounds like she was working on a fix before.

Here's an updated codePen with a example: https://codepen.io/justslone-the-encoder/pen/JjKqBXd?editors=1011

[behowell]

It looks like we need to update the key handler for SearchBox to check if the value is empty before handling Esc. I'll publish a PR.