fix: focus manager use with grid manager (#1228)

fix: In this change, we fix an issue with the focus manager which prevented focus from traveling into a tabbable element positioned after a focus-manged grid inside a popover. Using a grid, with controls in its cells, inside a popover (DatePicker) caused tabbable nodes expected by the focus manager to be changed by the grid manager. This is seen in Datepicker where it was not possible to navigate to the today footer button with keyboard tabbing.

Author: prsdthkr

src/utils/focusManager/focusManager.js

@@ -38,7 +38,19 @@ export default class FocusManager {
             }
 
             this.tabbableNodes = tabbable(this.container);
-            const currentIndex = this.tabbableNodes.indexOf(e.target);
+            let currentIndex = this.tabbableNodes.indexOf(e.target);
+            if (currentIndex === -1 ) {
+                // if the event target is not within the tabbable nodes, then
+                // chances are it is a nested descendent of one of the tabbable node.
+                // For example, it could be button within a grid cell, where that grid cell is tabbable
+                // Hence we should check if any of the tabbable nodes contain our target.
+                this.tabbableNodes.forEach((eachNode, index) => {
+                    if (eachNode?.contains(e.target)) {
+                        // if a tabbable node contains our target, that was the node with the current index.
+                        currentIndex = index;
+                    }
+                });
+            }
             const lastNode = this.tabbableNodes[this.tabbableNodes.length - 1];
             const firstNode = this.tabbableNodes[0];