Merge pull request #639 from vrk-kpa/fix/keyboard-event-propagation

[Hotfix] Keyboard event propagation
vrk-kpa · Jun 28, 2022 · 4607e67 · 4607e67
2 parents 4dcd4ad + 1e5fbb7
commit 4607e67
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "Suomi.fi UI component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/core/Dropdown/Dropdown/Dropdown.tsx b/src/core/Dropdown/Dropdown/Dropdown.tsx
@@ -297,6 +297,11 @@ class BaseDropdown extends Component<DropdownProps & InnerRef> {
                   this.buttonRef.current.focus();
                 }
               }}
+              onKeyDown={(event) => {
+                if (event.key === 'Escape') {
+                  event.stopPropagation();
+                }
+              }}
             >
               <ListBoxContextWrapper scrollContainerRef={this.popoverRef}>
                 {children}

diff --git a/src/core/Form/Select/MultiSelect/MultiSelect/MultiSelect.tsx b/src/core/Form/Select/MultiSelect/MultiSelect/MultiSelect.tsx
@@ -328,6 +328,7 @@ class BaseMultiSelect<T> extends Component<
       }
 
       case 'Enter': {
+        event.preventDefault();
         if (focusedDescendantId) {
           const focusedItem = items.find(
             ({ uniqueItemId }) => uniqueItemId === focusedDescendantId,
@@ -340,6 +341,9 @@ class BaseMultiSelect<T> extends Component<
       }
 
       case 'Escape': {
+        if (this.state.showPopover) {
+          event.stopPropagation();
+        }
         this.setState(
           (
             _prevState: MultiSelectState<T & MultiSelectData>,

diff --git a/src/core/Form/Select/SingleSelect/SingleSelect.tsx b/src/core/Form/Select/SingleSelect/SingleSelect.tsx
@@ -295,6 +295,7 @@ class BaseSingleSelect<T> extends Component<
       }
 
       case 'Enter': {
+        event.preventDefault();
         if (focusedDescendantId) {
           const focusedItem = popoverItems.find(
             ({ uniqueItemId }) => uniqueItemId === focusedDescendantId,
@@ -307,6 +308,9 @@ class BaseSingleSelect<T> extends Component<
       }
 
       case 'Escape': {
+        if (this.state.showPopover) {
+          event.stopPropagation();
+        }
         if (!this.state.selectedItem) {
           this.setState({ filterInputValue: '' });
         }

diff --git a/src/core/LanguageMenu/LanguageMenu/LanguageMenu.tsx b/src/core/LanguageMenu/LanguageMenu/LanguageMenu.tsx
@@ -144,7 +144,15 @@ const LanguageMenuPopoverPosition = (
 
 const StyledMenuPopover = styled(
   ({ theme, children, ...passProps }: MenuPopoverProps & SuomifiThemeProp) => (
-    <MenuPopover {...passProps} position={LanguageMenuPopoverPosition}>
+    <MenuPopover
+      {...passProps}
+      position={LanguageMenuPopoverPosition}
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') {
+          event.stopPropagation();
+        }
+      }}
+    >
       <MenuItems>{children}</MenuItems>
     </MenuPopover>
   ),