@patternfly/react-core 4.276.1 → 4.276.2

package/src/next/components/Dropdown/Dropdown.tsx

@@ -58,28 +58,27 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
-      if (!isOpen && toggleRef.current?.contains(event.target as Node)) {
-        // toggle was clicked open, focus on first menu item
-        if (event.key === 'Enter') {
-          setTimeout(() => {
-            const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
-            firstElement && (firstElement as HTMLElement).focus();
-          }, 0);
-        }
-      }
       // Close the menu on tab or escape if onOpenChange is provided
       if (
         (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
         toggleRef.current?.contains(event.target as Node)
       ) {
         if (event.key === 'Escape' || event.key === 'Tab') {
-          onOpenChange(!isOpen);
+          onOpenChange(false);
           toggleRef.current?.focus();
         }
       }
     };
 
-    const handleClickOutside = (event: MouseEvent) => {
+    const handleClick = (event: MouseEvent) => {
+      // toggle was clicked open via keyboard, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+        setTimeout(() => {
+          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
+          firstElement && (firstElement as HTMLElement).focus();
+        }, 0);
+      }
+
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu
       if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
         if (isOpen && !menuRef.current?.contains(event.target as Node)) {
@@ -89,11 +88,11 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     };
 
     window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
+    window.addEventListener('click', handleClick);
 
     return () => {
       window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('click', handleClick);
     };
   }, [isOpen, menuRef, onOpenChange]);
 

package/src/next/components/Select/Select.tsx

@@ -28,6 +28,8 @@ export interface SelectProps extends MenuProps, OUIAProps {
   innerRef?: React.Ref<HTMLDivElement>;
   /** z-index of the select menu */
   zIndex?: number;
+  /** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
+  role?: string;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -42,6 +44,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   minWidth,
   innerRef,
   zIndex = 9999,
+  role = 'listbox',
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -51,28 +54,27 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
-      if (!isOpen && toggleRef.current?.contains(event.target as Node)) {
-        // toggle was clicked open, focus on first menu item
-        if (event.key === 'Enter' || event.key === 'Space') {
-          setTimeout(() => {
-            const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
-            firstElement && (firstElement as HTMLElement).focus();
-          }, 0);
-        }
-      }
       // Close the menu on tab or escape if onOpenChange is provided
       if (
         (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
         toggleRef.current?.contains(event.target as Node)
       ) {
         if (event.key === 'Escape' || event.key === 'Tab') {
-          onOpenChange(!isOpen);
+          onOpenChange(false);
           toggleRef.current?.focus();
         }
       }
     };
 
-    const handleClickOutside = (event: MouseEvent) => {
+    const handleClick = (event: MouseEvent) => {
+      // toggle was clicked open via keyboard, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+        setTimeout(() => {
+          const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
+          firstElement && (firstElement as HTMLElement).focus();
+        }, 0);
+      }
+
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu
       if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
         if (isOpen && !menuRef.current?.contains(event.target as Node)) {
@@ -82,16 +84,17 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     };
 
     window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
+    window.addEventListener('click', handleClick);
 
     return () => {
       window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
+      window.removeEventListener('click', handleClick);
     };
   }, [isOpen, menuRef, onOpenChange]);
 
   const menu = (
     <Menu
+      role={role}
       className={css(className)}
       ref={menuRef}
       onSelect={(event, itemId) => onSelect(event, itemId)}

package/src/next/components/Select/SelectList.tsx

@@ -7,14 +7,19 @@ export interface SelectListProps extends MenuListProps {
   children: React.ReactNode;
   /** Classes applied to root element of select list */
   className?: string;
+  /** @beta Indicates to assistive technologies whether more than one item can be selected
+   * for a non-checkbox select.
+   */
+  isAriaMultiselectable?: boolean;
 }
 
 export const SelectList: React.FunctionComponent<MenuListProps> = ({
   children,
   className,
+  isAriaMultiselectable = false,
   ...props
 }: SelectListProps) => (
-  <MenuList className={css(className)} {...props}>
+  <MenuList isAriaMultiselectable={isAriaMultiselectable} className={css(className)} {...props}>
     {children}
   </MenuList>
 );

package/src/next/components/Select/examples/SelectCheckbox.tsx

@@ -40,6 +40,7 @@ export const SelectCheckbox: React.FunctionComponent = () => {
 
   return (
     <Select
+      role="menu"
       id="checkbox-select"
       ref={menuRef}
       isOpen={isOpen}

package/src/next/components/Select/examples/SelectMultiTypeahead.tsx

@@ -179,7 +179,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       onOpenChange={() => setIsOpen(false)}
       toggle={toggle}
     >
-      <SelectList>
+      <SelectList isAriaMultiselectable>
         {selectOptions.map((option, index) => (
           <SelectOption
             key={option.itemId || option.children}