Merge pull request #6387 from voxel51/josh/explore-modal-close-selection-clear

Stop propagation of the Escape event when looker is a Modal [FOEPD-862]

Author: jleven

app/packages/core/src/components/Grid/useEscape.ts

@@ -18,7 +18,17 @@ const useEscape = () => {
           }
 
           const modal = await snapshot.getPromise(fos.modalSelector);
-          modal === null && reset(fos.selectedSamples);
+          const selectedSampleIds = await snapshot.getPromise(
+            fos.selectedSamples
+          );
+          // TODO: modal is always `null` here right after a modal closes, so this isn't the condition we want
+          if (modal === null && selectedSampleIds.size > 0) {
+            if (
+              confirm("Are you sure you want to clear your current selection?")
+            ) {
+              reset(fos.selectedSamples);
+            }
+          }
         },
       []
     )

app/packages/looker/src/elements/common/looker.ts

@@ -30,13 +30,18 @@ export class LookerElement<State extends BaseState> extends BaseElement<
             SHORTCUTS,
             error,
             options: { shouldHandleKeyEvents },
+            config: { isModal },
           } = state;
           if (!error && e.key in SHORTCUTS) {
             const matchedControl = SHORTCUTS[e.key] as Control;
             const enabled =
               shouldHandleKeyEvents || matchedControl.alwaysHandle;
             if (enabled) {
               matchedControl.action(update, dispatchEvent, e.key, e.shiftKey);
+
+              if (e.key === "Escape" && isModal) {
+                e.stopPropagation();
+              }
             }
           }
 

app/packages/looker/src/state.ts

@@ -223,6 +223,7 @@ export interface BaseConfig {
     id: string;
     name: string;
   };
+  isModal?: boolean;
 }
 
 export interface FrameConfig extends BaseConfig {

app/packages/state/src/hooks/useCreateLooker.ts

@@ -159,6 +159,7 @@ export default <T extends AbstractLooker<BaseState>>(
           thumbnail,
           view,
           shouldHandleKeyEvents: isModal,
+          isModal,
         };
 
         let sampleMediaFilePath = urls[mediaField];

e2e-pw/src/oss/specs/selection.spec.ts

@@ -71,6 +71,7 @@ test.describe.serial("selection", () => {
       // verify selection clears on escape
       await grid.toggleSelectFirstSample();
       await grid.assert.isSelectionCountEqualTo(1);
+      page.once("dialog", (dialog) => dialog.accept());
       await page.press("body", "Escape");
       await grid.assert.isSelectionCountEqualTo(0);