fix(composer): remove useCallback from menu event handlers

awslabs · Oct 4, 2023 · 0a7c133 · 0a7c133
1 parent 536f391
commit 0a7c133
Showing 1 changed file with 25 additions and 31 deletions.
diff --git a/packages/scene-composer/src/components/toolbars/common/ToolbarItem.tsx b/packages/scene-composer/src/components/toolbars/common/ToolbarItem.tsx
@@ -50,40 +50,34 @@ export function ToolbarItem<T extends ToolbarItemOptions>({
     return null;
   };
 
-  const handleItemClick = useCallback(
-    (item: T) => {
+  const handleItemClick = (item: T) => {
+    type === 'mode-select' && setSelectedItem(item);
+    onSelect?.(item);
+  };
+
+  const handleItemKeyDown = (item: T, e, focusIndex?: number) => {
+    if (e.key === 'Enter') {
+      setShowMenu(true);
       type === 'mode-select' && setSelectedItem(item);
       onSelect?.(item);
-    },
-    [type],
-  );
-
-  const handleItemKeyDown = useCallback(
-    (item: T, e, focusIndex?: number) => {
-      if (e.key === 'Enter') {
-        setShowMenu(true);
-        type === 'mode-select' && setSelectedItem(item);
-        onSelect?.(item);
-      }
-      // if not a submenu item, return
-      if (focusIndex === undefined) {
-        return;
-      }
-      if (showMenu) {
-        if (e.key === 'Escape') {
-          itemContainerRef.current?.focus();
-          setShowMenu(false);
-        } else if (e.key === 'Tab' && !e.shiftKey && isItemLast(focusIndex) && firstItemRef.current) {
-          e.preventDefault(); // prevent tab from changing focus
-          firstItemRef.current.focus();
-        } else if (e.key === 'Tab' && e.shiftKey && isItemFirst(focusIndex) && lastItemRef.current) {
-          e.preventDefault(); // prevent tab + shift from changing focus
-          lastItemRef.current.focus();
-        }
+    }
+    // if not a submenu item, return
+    if (focusIndex === undefined) {
+      return;
+    }
+    if (showMenu) {
+      if (e.key === 'Escape') {
+        itemContainerRef.current?.focus();
+        setShowMenu(false);
+      } else if (e.key === 'Tab' && !e.shiftKey && isItemLast(focusIndex) && firstItemRef.current) {
+        e.preventDefault(); // prevent tab from changing focus
+        firstItemRef.current.focus();
+      } else if (e.key === 'Tab' && e.shiftKey && isItemFirst(focusIndex) && lastItemRef.current) {
+        e.preventDefault(); // prevent tab + shift from changing focus
+        lastItemRef.current.focus();
       }
-    },
-    [showMenu],
-  );
+    }
+  };
 
   useEffect(() => {
     initialSelectedItem && setSelectedItem(initialSelectedItem);