fix: Cannot read properties of undefined (reading 'matches') (#25280)

app/client/src/utils/hooks/useWidgetFocus/handleTab.ts

@@ -17,7 +17,7 @@ export function handleTab(event: KeyboardEvent) {
   const currentWidget = currentNode.closest(WIDGET_SELECTOR) as HTMLElement;
 
   switch (true) {
-    // when the current node is a widget, we want to do tabbing in regular way
+    // when the current node is one of these widget, we want to do tabbing in regular way
     // the elements will be in proper order in dom for thes widgets
     case currentWidget && currentWidget.matches(JSONFORM_WIDGET):
     case currentWidget && currentWidget.matches(CHECKBOXGROUP_WIDGET):

app/client/src/utils/hooks/useWidgetFocus/tabbable.test.ts

@@ -0,0 +1,7 @@
+import { getNextTabbableDescendant } from "./tabbable";
+
+describe("getNextTabbableDescendant", () => {
+  it("should return undefined if no descendants are passed", () => {
+    expect(getNextTabbableDescendant([])).toBeUndefined();
+  });
+});

app/client/src/utils/hooks/useWidgetFocus/tabbable.ts

@@ -115,6 +115,8 @@ export function getNextTabbableDescendant(
 ) {
   const nextTabbableDescendant = descendants[0];
 
+  if (!nextTabbableDescendant) return;
+
   // if nextTabbableDescendant is a container,
   if (nextTabbableDescendant.matches(CONTAINER_SELECTOR)) {
     const tabbableDescendants = getChildrenWidgetsOfNode(