fix: propagate Escape out of dialog

Previously, the Escape key was swallowed and in turn, if the picker was displayed in a dialog, the dialog would not close. Relates to PS-21279.
slidoapp · Jul 2, 2024 · 17e15b8 · 17e15b8
1 parent 6417fbb
commit 17e15b8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/emoji-mart/src/components/Navigation/Navigation.tsx b/packages/emoji-mart/src/components/Navigation/Navigation.tsx
@@ -24,7 +24,10 @@ export default class Navigation extends PureComponent {
  }
 
  handleKeyDown = (e: KeyboardEvent) => {
- e.stopImmediatePropagation()
+ // Escape should still propagate up since it can be used in a dialog
+ if (e.key !== 'Escape') {
+ e.stopImmediatePropagation()
+ }
 
  switch (e.key) {
  case 'ArrowLeft':

diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -406,10 +406,14 @@ export default class Picker extends Component {
  this.setState({ searchResults: grid, pos }, afterRender)
  }
 
- handleEmojisKeyDown = (e) => {
+ handleEmojisKeyDown = (e: KeyboardEvent) => {
  // const specialKey = e.altKey || e.ctrlKey || e.metaKey
  const input = this.refs.searchInput.current
- e.stopImmediatePropagation()
+
+ // Escape should still propagate up since it can be used in a dialog
+ if (e.key !== 'Escape') {
+ e.stopImmediatePropagation()
+ }
 
  switch (e.key) {
  case 'ArrowLeft':