fix(FloatingMenu): ignore disabled nodes for autofocus (#6679)

Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Aug 24, 2020 · a135f5c · a135f5c
1 parent d461f83
commit a135f5c
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js
@@ -336,8 +336,10 @@ class FloatingMenu extends React.Component {
     const primaryFocusNode = menuBody.querySelector(
       this.props.selectorPrimaryFocus || null
     );
-    const tabbableNode = menuBody.querySelector(selectorTabbable);
-    const focusableNode = menuBody.querySelector(selectorFocusable);
+    const tabbableNodes = menuBody.querySelectorAll(selectorTabbable);
+    const focusableNodes = menuBody.querySelectorAll(selectorFocusable);
+    const tabbableNode = [...tabbableNodes].find((node) => !node.disabled);
+    const focusableNode = [...focusableNodes].find((node) => !node.disabled);
     const focusTarget =
       primaryFocusNode || // User defined focusable node
       tabbableNode || // First sequentially focusable node