fix: escape in toolbar

qlik-oss · Apr 13, 2023 · 35f7b4a · 35f7b4a
1 parent 33eaa57
commit 35f7b4a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/apis/nucleus/src/components/ActionsToolbar.jsx b/apis/nucleus/src/components/ActionsToolbar.jsx
@@ -136,8 +136,8 @@ function ActionsToolbar({
   };
 
   const handleActionsKeyDown = useMemo(
-    () => getActionsKeyDownHandler({ keyboardNavigation, focusHandler, getEnabledButton }),
-    [keyboardNavigation, focusHandler, getEnabledButton]
+    () => getActionsKeyDownHandler({ keyboardNavigation, focusHandler, getEnabledButton, selections }),
+    [keyboardNavigation, focusHandler, getEnabledButton, selections]
   );
 
   useEffect(

diff --git a/apis/nucleus/src/components/actions-toolbar-keydown.js b/apis/nucleus/src/components/actions-toolbar-keydown.js
@@ -17,7 +17,7 @@ const focusButton = (index) => {
   btn.focus();
 };
 
-export default function getActionsKeyDownHandler({ keyboardNavigation, focusHandler, getEnabledButton }) {
+export default function getActionsKeyDownHandler({ keyboardNavigation, focusHandler, getEnabledButton, selections }) {
   const handleActionsKeyDown = (evt) => {
     const { target, nativeEvent } = evt;
     const { keyCode } = nativeEvent;
@@ -52,6 +52,14 @@ export default function getActionsKeyDownHandler({ keyboardNavigation, focusHand
           }
         }
         break;
+      case KEYS.ESCAPE:
+        if (selections) {
+          selections.onCancel();
+          selections.api.cancel();
+          evt.preventDefault();
+          evt.stopPropagation();
+        }
+        break;
       default:
         break;
     }

diff --git a/apis/nucleus/src/components/listbox/ListBoxInline.jsx b/apis/nucleus/src/components/listbox/ListBoxInline.jsx
@@ -254,6 +254,7 @@ function ListBoxInline({ options, layout }) {
       isLocked,
       listboxSelectionToolbarItems,
       selections,
+      keyboard,
     });
 
   const shouldAutoFocus = searchVisible && search === 'toggle';

diff --git a/apis/nucleus/src/components/listbox/interactions/listbox-get-action-props.js b/apis/nucleus/src/components/listbox/interactions/listbox-get-action-props.js
@@ -5,6 +5,7 @@ export default function getListboxActionProps({
   isLocked,
   listboxSelectionToolbarItems,
   selections,
+  keyboard,
 }) {
   return {
     show: showToolbar && !isDetached,
@@ -26,8 +27,12 @@ export default function getListboxActionProps({
     selections: {
       show: showToolbar,
       api: selections,
-      onConfirm: () => {},
-      onCancel: () => {},
+      onConfirm: () => {
+        keyboard?.focus();
+      },
+      onCancel: () => {
+        keyboard?.focus();
+      },
     },
   };
 }