feat: use general onToggleKeydown instead of onToggleArrowKeydown

patternfly · Nov 12, 2024 · cdd6f0f · cdd6f0f
1 parent 513c6f5
commit cdd6f0f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -51,8 +51,8 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   onOpenChange?: (isOpen: boolean) => void;
   /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
   onOpenChangeKeys?: string[];
-  /** Callback to override the default behavior when pressing up/down arrow keys when the toggle has focus and the menu is open. By default non-disabled menu items will receive focus - the first item on arrow down or the last item on arrow up. */
-  onToggleArrowKeydown?: (event: KeyboardEvent) => void;
+  /** Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. */
+  onToggleKeydown?: (event: KeyboardEvent) => void;
   /** Indicates if the menu should be without the outer box-shadow. */
   isPlain?: boolean;
   /** Indicates if the menu should be scrollable. */
@@ -87,7 +87,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   toggle,
   shouldFocusToggleOnSelect = false,
   onOpenChange,
-  onToggleArrowKeydown,
+  onToggleKeydown,
   isPlain,
   isScrollable,
   innerRef,
@@ -143,10 +143,10 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
         }
       }
 
-      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
-        if (onToggleArrowKeydown) {
-          onToggleArrowKeydown(event);
-        } else {
+      if (toggleRef.current?.contains(event.target as Node)) {
+        if (onToggleKeydown) {
+          onToggleKeydown(event);
+        } else if (isOpen) {
           onToggleArrowKeydownDefault(event, menuRef);
         }
       }
@@ -174,7 +174,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     toggleRef,
     onOpenChange,
     onOpenChangeKeys,
-    onToggleArrowKeydown,
+    onToggleKeydown,
     shouldPreventScrollOnItemFocus,
     shouldFocusFirstItemOnOpen,
     focusTimeoutDelay

diff --git a/packages/react-core/src/components/Menu/MenuContainer.tsx b/packages/react-core/src/components/Menu/MenuContainer.tsx
@@ -34,8 +34,8 @@ export interface MenuContainerProps {
   onOpenChange?: (isOpen: boolean) => void;
   /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
   onOpenChangeKeys?: string[];
-  /** Callback to override the default behavior when pressing up/down arrow keys when the toggle has focus and the menu is open. By default non-disabled menu items will receive focus - the first item on arrow down or the last item on arrow up. */
-  onToggleArrowKeydown?: (event: KeyboardEvent) => void;
+  /** Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. */
+  onToggleKeydown?: (event: KeyboardEvent) => void;
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
@@ -58,7 +58,7 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
   toggle,
   toggleRef,
   onOpenChange,
-  onToggleArrowKeydown,
+  onToggleKeydown,
   zIndex = 9999,
   popperProps,
   onOpenChangeKeys = ['Escape', 'Tab'],
@@ -95,10 +95,10 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
         }
       }
 
-      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
-        if (onToggleArrowKeydown) {
-          onToggleArrowKeydown(event);
-        } else {
+      if (toggleRef.current?.contains(event.target as Node)) {
+        if (onToggleKeydown) {
+          onToggleKeydown(event);
+        } else if (isOpen) {
           onToggleArrowKeydownDefault(event, menuRef);
         }
       }
@@ -126,7 +126,7 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
     menuRef,
     onOpenChange,
     onOpenChangeKeys,
-    onToggleArrowKeydown,
+    onToggleKeydown,
     shouldPreventScrollOnItemFocus,
     toggleRef
   ]);

diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx
@@ -62,8 +62,8 @@ export interface SelectProps extends MenuProps, OUIAProps {
   onOpenChange?: (isOpen: boolean) => void;
   /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
   onOpenChangeKeys?: string[];
-  /** Callback to override the default behavior when pressing up/down arrow keys when the toggle has focus and the menu is open. By default non-disabled menu items will receive focus - the first item on arrow down or the last item on arrow up. */
-  onToggleArrowKeydown?: (event: KeyboardEvent) => void;
+  /** Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. */
+  onToggleKeydown?: (event: KeyboardEvent) => void;
   /** Indicates that the Select is used as a typeahead (combobox). Focus won't shift to menu items when pressing up/down arrows. */
   isTypeahead?: boolean;
   /** Indicates if the select should be without the outer box-shadow */
@@ -99,7 +99,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   shouldFocusFirstItemOnOpen = false,
   onOpenChange,
   onOpenChangeKeys = ['Escape', 'Tab'],
-  onToggleArrowKeydown,
+  onToggleKeydown,
   isTypeahead,
   isPlain,
   innerRef,
@@ -151,10 +151,10 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
         }
       }
 
-      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
-        if (onToggleArrowKeydown) {
-          onToggleArrowKeydown(event);
-        } else if (!isTypeahead) {
+      if (toggleRef.current?.contains(event.target as Node)) {
+        if (onToggleKeydown) {
+          onToggleKeydown(event);
+        } else if (isOpen && !isTypeahead) {
           onToggleArrowKeydownDefault(event, menuRef);
         }
       }
@@ -182,7 +182,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     toggleRef,
     onOpenChange,
     onOpenChangeKeys,
-    onToggleArrowKeydown,
+    onToggleKeydown,
     shouldPreventScrollOnItemFocus,
     shouldFocusFirstItemOnOpen,
     focusTimeoutDelay