Focus on first visible field in form and in navigable layouts (#1517)

pavi41 · Pavitra Khatri · web-flow · commit 4d735479d8c5 · 2025-04-23T16:16:29.000+05:30
Co-authored-by: Pavitra Khatri &lt;pavitrakhatri@pavitras-mbp.corp.adobe.com&gt;
diff --git a/it/content/src/main/content/META-INF/vault/filter.xml b/it/content/src/main/content/META-INF/vault/filter.xml
@@ -9,6 +9,7 @@
     <filter root="/conf/global/settings/forms" mode="update"/>
     <filter root="/conf/global/settings/cloudconfigs/edge-delivery-service-configuration" mode="update"/>
     <filter root="/conf/global/settings/cloudconfigs/marketo" mode="update"/>
+    <filter root="/conf/forms/core-components-it/samples/customfunctionedgedelivery" mode="update"/>
     <filter root="/conf/core-components-it" mode="update"/>
     <filter root="/conf/wknd" mode="update"/>
     <filter root="/conf/datalayerContainer" mode="update"/>
diff --git a/it/content/src/main/content/jcr_root/conf/forms/.content.xml b/it/content/src/main/content/jcr_root/conf/forms/.content.xml
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>
diff --git a/it/content/src/main/content/jcr_root/conf/forms/core-components-it/.content.xml b/it/content/src/main/content/jcr_root/conf/forms/core-components-it/.content.xml
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>
diff --git a/it/content/src/main/content/jcr_root/conf/forms/core-components-it/samples/.content.xml b/it/content/src/main/content/jcr_root/conf/forms/core-components-it/samples/.content.xml
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>
diff --git a/it/content/src/main/content/jcr_root/conf/forms/core-components-it/samples/customfunctionedgedelivery/settings/cloudconfigs/.content.xml b/it/content/src/main/content/jcr_root/conf/forms/core-components-it/samples/customfunctionedgedelivery/settings/cloudconfigs/.content.xml
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    jcr:primaryType="sling:Folder"/>
diff --git a/it/content/src/main/content/jcr_root/conf/forms/core-components-it/samples/customfunctionedgedelivery/settings/cloudconfigs/edge-delivery-service-configuration/.content.xml b/it/content/src/main/content/jcr_root/conf/forms/core-components-it/samples/customfunctionedgedelivery/settings/cloudconfigs/edge-delivery-service-configuration/.content.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    jcr:primaryType="cq:Page">
+    <jcr:content
+        cq:lastModified="{Date}2024-04-22T09:56:19.511+05:30"
+        cq:lastModifiedBy="admin"
+        cq:template="/libs/core/franklin/shell/components/configuration/page/template"
+        jcr:primaryType="cq:PageContent"
+        jcr:title="Edge Delivery Service Configuration"
+        sling:configPropertyInherit="true"
+        sling:resourceType="core/franklin/shell/components/configuration/page"
+        auxiliaryScripts="[https://cdn.jsdelivr.net/gh/adobe/universal-editor-cors@latest/dist/universal-editor-embedded.js,module:scripts/editor-support.js]"
+        edgeHost="preview"
+        owner="adobe-rnd"
+        repo="aem-boilerplate-forms"/>
+</jcr:root>
diff --git a/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/wizard/navigationWithRepeatability/.content.xml b/it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/wizard/navigationWithRepeatability/.content.xml
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/commons/js/common.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/commons/js/common.js
@@ -87,7 +87,7 @@
                 }
             }
 
-
+            
             /**
              * Returns all expanded items.
              *
@@ -225,8 +225,26 @@
                     panel.classList.add(this.constructor.cssClasses.panel.expanded);
                     panel.classList.remove(this.constructor.cssClasses.panel.hidden);
                     panel.setAttribute("aria-hidden", false);
+                     
+                    // To set the focus on the field when tab expands
+                    if (document.activeElement === button) {
+                            const panelId = panel.id.replace(this.constructor.idSuffixes.panel, "");
+                            const form = this.formContainer.getModel();
+                            //Find repeatable tab
+                            let tab = this.getModel().getState().items.find(item => item.type === 'array')?.items?.find(subItem => subItem.id === panelId);
+                            // If not found, try non-repeatable tab
+                            if (!tab) {
+                                tab = this.getModel().getState().items.find(item => item.id === panelId);
+                            }
+                            if (tab && Array.isArray(tab.items) && tab.items.length > 0) {
+                                const field = form.getElement(tab.id);
+                                if (field) {
+                                    setTimeout(() => {form.setFocus(field)}, 0);
+                                }
+                            }
+                        }
+                    }
                 }
-            }
 
             /**
              * Annotates the item and its internals with
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js
@@ -97,7 +97,6 @@
                 this.expandItem(item)
             }
 
-
             #collapseAllItems() {
                 var items = this.getCachedItems();
                 if (items) {
@@ -245,6 +244,16 @@
                 return accordionItemDivToBeRepeated;
             }
 
+            focusOnRepeatableInstances(id) {
+                const panelId = id.replace(Accordion.idSuffixes.item, "");
+                const form = this.formContainer.getModel();
+                const tab = this.getModel().getState().items.find(item => item.type === 'array')?.items?.find(subItem => subItem.id === panelId)
+                const field = form.getElement(tab?.id);
+                if (field) {
+                    setTimeout(() => {form.setFocus(field)}, 0);
+                }
+            }
+
             handleChildAddition(childView) {
                 var itemDivToExpand;
                 this.cacheElements(this._elements.self);
@@ -263,22 +272,44 @@
                 const newIndex = cachedItems.indexOf(itemDivToExpand);
                 this.getCachedButtons()[newIndex].classList.remove(this.constructor.cssClasses.button.stepped);
                 this.getCachedPanels()[newIndex].classList.remove(this.constructor.cssClasses.panel.stepped);
-                
+
+                this.focusOnRepeatableInstances(itemDivToExpand.id);
+
                 this.#showHideRepeatableButtons(childView.getInstanceManager());
             }
 
             handleChildRemoval(removedInstanceView) {
                 var removedAccordionItemDivId = removedInstanceView.element.id + Accordion.idSuffixes.item;
                 var removedAccordionItemDiv = this.getItemById(removedAccordionItemDivId);
+                
+                // Find the previous item before removing the current one
+                var cachedItems = this.getCachedItems();
+                var currentIndex = cachedItems.indexOf(removedAccordionItemDiv);
+                var itemDivToExpand = null;
+                
+                // If there are items and current item is found
+                if (cachedItems && cachedItems.length > 0 && currentIndex > -1) {
+                    // If there's a previous item, use it
+                    if (currentIndex > 0) {
+                        itemDivToExpand = cachedItems[currentIndex - 1];
+                    } else {
+                        // If we're removing the first item, use the next one if available
+                        itemDivToExpand = cachedItems[1] || null;
+                    }
+                }
+                
+                // Now remove the item
                 removedAccordionItemDiv.remove();
                 this.children.splice(this.children.indexOf(removedInstanceView), 1);
                 this.cacheElements(this._elements.self);
-                var cachedItems = this.getCachedItems();
-                if (cachedItems && cachedItems.length > 0) {
-                    var firstItem = cachedItems[0];
-                    this.expandItem(firstItem);
-                    this.collapseAllOtherItems(firstItem.id);
+                
+                // Expand the target item if found
+                if (itemDivToExpand) {
+                    this.expandItem(itemDivToExpand);
+                    this.collapseAllOtherItems(itemDivToExpand.id);
+                    this.focusOnRepeatableInstances(itemDivToExpand.id)
                 }
+
                 this.#showHideRepeatableButtons(removedInstanceView.getInstanceManager());
             }
 
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js
@@ -150,6 +150,9 @@
              * @param {Number} index The index of the tab to navigate to
              */
             navigate(index) {
+                if (this._active === index) {
+                    return; // already on this tab
+                }
                 this._active = index;
                 this.addSteppedClass();
                 this.refreshActive();
diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js
@@ -199,6 +199,12 @@
             }
 
 
+            getFocusElementId() {
+                const activeIndex = this._active;
+                const activeTabElement = this.getCachedTabs()[activeIndex];
+                return activeTabElement.id.substring(0, activeTabElement.id.lastIndexOf(Wizard.#tabIdSuffix));
+            }
+
             #navigateToNextTab() {
                 const activeIndex = this._active;
                 const activeTabElement = this.getCachedTabs()[activeIndex];
@@ -334,6 +340,8 @@
             #navigateAndFocusTab(index) {
                 this.navigate(index);
                 this.focusWithoutScroll(this.getCachedTabs()[index]);
+                const id = this.getFocusElementId();
+                this.focusToFirstVisibleField(id);
             }
    
             #syncWizardNavLabels() {
@@ -414,12 +422,33 @@
                 let removedTabNavId = removedTabPanelId.substring(0, removedTabPanelId.lastIndexOf("__")) + Wizard.#tabIdSuffix;
                 let wizardPanelElement = this.#getWizardPanelElementById(removedTabPanelId);
                 let tabNavElement = this.getTabNavElementById(removedTabNavId);
+
+                const tabs = this.getCachedTabs();
+                const currentIndex = Array.from(tabs).findIndex(tab => tab.id === removedTabNavId);
+                let nextIndex = -1;
+                
+                if (currentIndex === 0) {
+                    // If removing first tab, focus on the next one
+                    nextIndex = 1;
+                } else {
+                    // Look for previous visible tab
+                    for (let i = currentIndex - 1; i >= 0; i--) {
+                        nextIndex = i;
+                        break;
+                    }
+                }
+                
                 tabNavElement.remove();
                 wizardPanelElement.remove();
                 this.children.splice(this.children.indexOf(removedInstanceView), 1);
                 this.cacheElements(this._elements.self);
                 this._active = this.getActiveIndex(this.getCachedTabs());
                 this.refreshActive();
+
+                // Focus the next tab after active state is updated
+                if (nextIndex !== -1 && tabs[nextIndex]) {
+                    this.#navigateAndFocusTab(nextIndex);    
+                }
             }
 
             addChild(childView) {
diff --git a/ui.frontend/src/view/FormField.js b/ui.frontend/src/view/FormField.js
@@ -78,7 +78,7 @@ class FormField {
         if (!this.isActive()) {
             this.element.setAttribute(Constants.DATA_ATTRIBUTE_ACTIVE, true);
             // optimizing the performance to check if the activeChild is different, else this will be a redundant call
-            if (this.parentView?._model?.activeChild !== this._model) {
+            if (this.parentView && this.parentView?._model?.activeChild !== this._model) {
                 this.parentView._model.activeChild = this._model; // updating the activeChild of the model when a field is focused in view
             }
             this.active = true;
diff --git a/ui.frontend/src/view/FormFieldBase.js b/ui.frontend/src/view/FormFieldBase.js
@@ -261,7 +261,7 @@ class FormFieldBase extends FormField {
      */
     setFocus(id) {
         const fieldType = this.parentView?.getModel()?.fieldType;
-        if (fieldType !== 'form' && this.parentView.setFocus) {
+        if (fieldType !== 'form' && this.parentView?.setFocus) {
             this.parentView.setFocus(this.getId());
         }
         if(!this.isActive()) {
@@ -382,7 +382,7 @@ class FormFieldBase extends FormField {
      * @private
      */
     #getPanelName() {
-        return this.parentView.getModel().name;
+        return this.parentView?.getModel()?.name;
     }
 
     setWidgetValueToDisplayValue() {
diff --git a/ui.frontend/src/view/FormPanel.js b/ui.frontend/src/view/FormPanel.js
@@ -71,11 +71,66 @@ class FormPanel extends FormFieldBase {
      */
     setFocus(id) {
         const fieldType = this.parentView?.getModel()?.fieldType;
-        if (fieldType !== 'form' && this.parentView.setFocus) {
+        if (fieldType !== 'form' && this.parentView?.setFocus) {
             this.parentView.setFocus(this.getId());
         }
     }
 
+    getActiveRepeatableNonRepeatableTabId(items, id){
+        for (const item of items) {
+            if(item.id === id){
+                return id;
+            } else if(item.fieldType === 'panel' && item.type === 'array'){
+                const repeatableItems = this.formContainer.getModel().getElement(item.id).getState();
+                const result = this.getActiveRepeatableNonRepeatableTabId(repeatableItems.items, id);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return null;
+    }
+  
+    /**
+     * Sets the focus to first field while navigating in navigable layouts.
+     * @param {string} id - The ID of the field to set focus to.
+     */
+    focusToFirstVisibleField(id) {
+        const form = this.formContainer.getModel();
+        const activeTabId = this.getActiveRepeatableNonRepeatableTabId(this.getModel().getState().items, id); 
+        const activeTab = form.getElement(activeTabId);
+        if (!activeTab) {
+            return;
+        }
+
+        const findFirstPanelNonPanelField = (item) => {
+            // Return early if not visible
+            if (!item.visible || !item.enabled) {
+                return null;
+            }
+        
+            // If item is not a panel, return it
+            if (item.fieldType && item.fieldType !== "panel") {
+                return item;
+            } else {
+                // Check each child
+                for (const childItem of item.items) {
+                    const result = findFirstPanelNonPanelField(childItem);
+                    if (result) {
+                        return result;
+                    }
+                }
+            }
+
+            return null;
+        };
+    
+        const firstField = findFirstPanelNonPanelField(activeTab);
+        if (firstField) {
+            setTimeout(() => {this.formContainer.setFocus(firstField.id)}, 0);
+        }
+    }
+
     /**
      * Adds a child view to the FormPanel.
      * @param {Object} childView - The child view to be added.
diff --git a/ui.frontend/src/view/FormTabs.js b/ui.frontend/src/view/FormTabs.js
@@ -249,11 +249,12 @@ class FormTabs extends FormPanel {
         if (this.#_active !== tabId) {
             this.navigate(tabId);
             this.focusWithoutScroll(this.#getTabNavElementById(tabId));
+            const id = this.getActiveTabId(this.#getCachedTabs()).replace(this.#tabIdSuffix,"");
+            this.focusToFirstVisibleField(id);
         }
     }
 
 
-
     #getTabNavElementById(tabId) {
         var tabs = this.#getCachedTabs();
         if (tabs) {
@@ -328,7 +329,6 @@ class FormTabs extends FormPanel {
         }
     }
 
-
     /**
      * Synchronizes tab labels with their corresponding tab panels.
      * Updates the ID and aria-controls attribute of each tab label.
@@ -434,12 +434,30 @@ class FormTabs extends FormPanel {
         var removedTabNavId = removedInstanceView.element.id + this.#tabIdSuffix;
         var tabPanelElement = this.#getTabPanelElementById(removedTabPanelId);
         var tabNavElement = this.#getTabNavElementById(removedTabNavId);
+        const tabs = this.#getCachedTabs();
+        const currentIndex = Array.from(tabs).findIndex(tab => tab.id === removedTabNavId);
+        let nextTab = null;
+    
+        if (currentIndex === 0) {
+            nextTab = tabs[1];  // Simply get the next tab
+        } else {
+            // Look for previous visible tab
+            for (let i = currentIndex - 1; i >= 0; i--) {
+                nextTab = tabs[i];
+                break;
+            }
+        }
+        
         tabNavElement.remove();
         tabPanelElement.remove();
         this.children.splice(this.children.indexOf(removedInstanceView), 1);
         this.#cacheElements(this._elements.self);
-        this.#_active = this.getActiveTabId(this._elements["tab"]);
         this.#refreshActive();
+
+        // Only navigate if the next tab is not already active
+        if (nextTab) {
+            this.navigateAndFocusTab(nextTab.id);
+        }
     }
 
     /**
diff --git a/ui.tests/test-module/specs/accordion/accordion.runtime.cy.js b/ui.tests/test-module/specs/accordion/accordion.runtime.cy.js
diff --git a/ui.tests/test-module/specs/customfunctionedgedelivery/customfunctionedgedelivery.cy.js b/ui.tests/test-module/specs/customfunctionedgedelivery/customfunctionedgedelivery.cy.js
diff --git a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.cy.js
diff --git a/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js b/ui.tests/test-module/specs/tabsontop/tabsontop.runtime.repeatability.cy.js
diff --git a/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js b/ui.tests/test-module/specs/wizard/wizard.runtime.cy.js
diff --git a/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js b/ui.tests/test-module/specs/wizard/wizard.runtime.repeatability.cy.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<?xml version="1.0" encoding="UTF-8"?>`
	`2`	`+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"`
	`3`	`+ jcr:primaryType="sling:Folder"/>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<?xml version="1.0" encoding="UTF-8"?>`
	`2`	`+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"`
	`3`	`+ jcr:primaryType="sling:Folder"/>`