close context menu on escape (#5656)

**Problem:** Today "Escape" only clears the filter text but doesn't close the context menu **Fix:** Clear the text only if there is a text, otherwise close the context menu <video src="https://github.com/concrete-utopia/utopia/assets/7003853/26c2e367-c809-42b2-9cbd-4d3973331b2c" />
concrete-utopia · May 16, 2024 · 0379045 · 0379045
1 parent 9b752cd
commit 0379045
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/editor/src/components/navigator/navigator-item/component-picker-context-menu.tsx b/editor/src/components/navigator/navigator-item/component-picker-context-menu.tsx
@@ -759,6 +759,10 @@ const ComponentPickerContextMenuFull = React.memo<ComponentPickerContextMenuProp
     const metadataRef = useRefEditorState((state) => state.editor.jsxMetadata)
     const elementPathTreesRef = useRefEditorState((state) => state.editor.elementPathTree)
 
+    const hideAllContextMenus = React.useCallback(() => {
+      contextMenu.hideAll()
+    }, [])
+
     const onItemClick = React.useCallback(
       (preferredChildToInsert: InsertableComponent) => (e: React.UIEvent) => {
         e.stopPropagation()
@@ -774,9 +778,17 @@ const ComponentPickerContextMenuFull = React.memo<ComponentPickerContextMenuProp
           insertionTarget,
         )
 
-        contextMenu.hideAll()
+        hideAllContextMenus()
       },
-      [target, projectContentsRef, metadataRef, elementPathTreesRef, dispatch, insertionTarget],
+      [
+        target,
+        projectContentsRef,
+        metadataRef,
+        elementPathTreesRef,
+        dispatch,
+        insertionTarget,
+        hideAllContextMenus,
+      ],
     )
 
     const squashEvents = React.useCallback((e: React.UIEvent<unknown>) => {
@@ -800,7 +812,11 @@ const ComponentPickerContextMenuFull = React.memo<ComponentPickerContextMenuProp
         onShown={onShown}
         onHidden={onHidden}
       >
-        <ComponentPicker allComponents={allInsertableComponents} onItemClick={onItemClick} />
+        <ComponentPicker
+          allComponents={allInsertableComponents}
+          onItemClick={onItemClick}
+          closePicker={hideAllContextMenus}
+        />
       </Menu>
     )
   },

diff --git a/editor/src/components/navigator/navigator-item/component-picker.tsx b/editor/src/components/navigator/navigator-item/component-picker.tsx
@@ -32,6 +32,7 @@ interface Category {
 export interface ComponentPickerProps {
   allComponents: Array<InsertMenuItemGroup>
   onItemClick: (elementToInsert: InsertableComponent) => React.UIEventHandler
+  closePicker: () => void
 }
 
 export interface ElementToInsert {
@@ -73,7 +74,7 @@ export function componentPickerOptionTestId(componentName: string, variant?: str
 }
 
 export const ComponentPicker = React.memo((props: ComponentPickerProps) => {
-  const { onItemClick } = props
+  const { onItemClick, closePicker } = props
   const [selectedComponentKey, setSelectedComponentKey] = React.useState<string | null>(null)
   const [filter, setFilter] = React.useState<string>('')
   const menuRef = React.useRef<HTMLDivElement | null>(null)
@@ -148,14 +149,16 @@ export const ComponentPicker = React.memo((props: ComponentPickerProps) => {
         if (selectedComponent != null) {
           onItemClick(selectedComponent.value)(e)
         }
+      } else if (e.key === 'Escape') {
+        closePicker()
       } else {
         // we don't want to prevent default for other keys
         return
       }
       e.preventDefault()
       e.stopPropagation()
     },
-    [flatComponentsToShow, highlightedComponentKey, onItemClick, selectIndex],
+    [flatComponentsToShow, highlightedComponentKey, onItemClick, selectIndex, closePicker],
   )
 
   const categorizedComponents = [
@@ -240,14 +243,16 @@ const FilterBar = React.memo((props: FilterBarProps) => {
         if (onKeyDown != null) {
           onKeyDown(e)
         }
-      } else if (e.key === 'Escape') {
+      } else if (e.key === 'Escape' && filter !== '') {
+        // clear filter only if there is text,
+        // otherwise it will close the picker
         setFilter('')
       } else if (onKeyDown != null) {
         onKeyDown(e)
       }
       e.stopPropagation()
     },
-    [setFilter, onKeyDown],
+    [setFilter, onKeyDown, filter],
   )
   const handleFilterChange = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {