@patternfly/react-core 4.231.0 → 4.231.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.231.0",
+  "version": "4.231.1",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.82.0",
-    "@patternfly/react-styles": "^4.81.0",
-    "@patternfly/react-tokens": "^4.83.0",
+    "@patternfly/react-icons": "^4.82.1",
+    "@patternfly/react-styles": "^4.81.1",
+    "@patternfly/react-tokens": "^4.83.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "6e1df86d6c02166eb1b8ea4a5afeb252da326d22"
+  "gitHead": "08259f7384e4352eac01fd69ba3fa90b8d024c06"
 }

package/src/components/Menu/Menu.tsx

@@ -272,10 +272,13 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
             additionalKeyHandler={this.handleExtraKeys}
             createNavigableElements={this.createNavigableElements}
             isActiveElement={(element: Element) =>
+              document.activeElement.closest('li') === element ||
               document.activeElement.parentElement === element ||
               (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element)
             }
-            getFocusableElement={(navigableElement: Element) => navigableElement.firstChild as Element}
+            getFocusableElement={(navigableElement: Element) =>
+              navigableElement.querySelector('input') || (navigableElement.firstChild as Element)
+            }
             noHorizontalArrowHandling={
               document.activeElement &&
               (document.activeElement.classList.contains('pf-c-breadcrumb__link') ||

package/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx

@@ -13,7 +13,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
         if (isOpen && menuRef.current.contains(event.target as Node)) {
           if (event.key === 'Escape' || event.key === 'Tab') {
             setIsOpen(!isOpen);
-            toggleRef.current.focus();
+            toggleRef?.current?.focus();
           }
         }
       }
@@ -23,7 +23,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
 
   const handleClickOutside = React.useCallback(
     event => {
-      if (isOpen && !menuRef.current.contains(event.target as Node)) {
+      if (isOpen && !menuRef?.current?.contains(event.target as Node)) {
         setIsOpen(false);
       }
     },
@@ -43,7 +43,7 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
     ev.stopPropagation(); // Stop handleClickOutside from handling
     setTimeout(() => {
       if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+        const firstElement = menuRef.current.querySelector('li input:not(:disabled)');
         firstElement && (firstElement as HTMLElement).focus();
       }
     }, 0);
@@ -94,5 +94,5 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return <Popper appendTo={toggleRef.current} trigger={toggle} popper={menu} isVisible={isOpen} />;
 };