AEM Upgrade 6.5.17 issue with Nested Multi-field Authoring Focus Missing | Community
Skip to main content
Level 2
July 20, 2023
Solved

AEM Upgrade 6.5.17 issue with Nested Multi-field Authoring Focus Missing

  • July 20, 2023
  • 4 replies
  • 3796 views

This is regarding the AEM upgrade as we are upgrading to AEM SP 6.5.17  and The issue is when we add fields in the nested Multi-field then the focus is wrongly mapped to the first field of the parent or the first field of the first set of the nested field. This issue happens only if the nested multi-field is added inside the tabs. Please let me know if any one experience this issue in AEM SP 6.5.13. Any help is appreciated. Thank you.

Best answer by charlie_yc

I recently encountered a similar issue.

After some investigation, I found that the problem was caused by Coral 3's Nested Multifield — when clicking the Add button, it triggers a duplicate focus event, which causes the page to scroll to the wrong position.

To fix this, I chose to override the native _onAddItemClick method, which successfully resolved the scrolling issue.

Below is the code I used. Please note that this script must be loaded after the categories coralui3 library is fully loaded.

Hope this helps!

 

(function () { 'use strict'; Coral.Multifield.prototype._onAddItemClick = function (event) { var parent = event.target.closest("coral-multifield"); if (parent && parent === this) { event.stopPropagation(); this.items.add(new Coral.Multifield.Item); this.trigger("change"); this._trackEvent("click", "add item button", event); var addBtn = event.target; var items = this.items.getAll(); var setsize = items.length; var itemToFocus = items[setsize - 1]; window.requestAnimationFrame(function () { var focusableItem = itemToFocus.querySelector(Coral.commons.TABBABLE_ELEMENT_SELECTOR); if (focusableItem.hasAttribute("disabled")) addBtn.focus(); else focusableItem.focus() }); } }; }());

4 replies

Nilesh_Mali
Level 3
July 21, 2023

I fixed the same issue a year back, below steps might be helpful to you resolve the same

  • Add new property for the same node as composite="{Boolean}true".
  • Go to the child node named as field and remove acs-commons-nested property.
  • Update the sling:resourceType for the field from granite/ui/components/foundation/form/fieldset to granite/ui/components/coral/foundation/container.

Make sure nested multiField are storing the data in nodes format and not in JSON format.

For already configured json data nodes write a script to convert it into the jcrNodes

kchauraAuthor
Level 2
July 24, 2023

@nilesh_mali  Thanks for the quick response. Whatever you suggested those are already there in the nested multi field node structure and not to implement. is there any other things which to be implement, Please check and suggest. Please find my comments inline. Thanks

 

  • Add new property for the same node as composite="{Boolean}true" -  These property are already there.
  • Go to the child node named as field and remove acs-commons-nested property. - This property is already not there.
  • Update the sling:resourceType for the field - Coral path is already there. from granite/ui/components/foundation/form/fieldset to granite/ui/components/coral/foundation/container

 

Nilesh_Mali
Level 3
July 24, 2023

If possible share your dialog xml file code

kautuk_sahni
Community Manager
Community Manager
October 18, 2024

@kchaura If you have successfully found a solution on your own, we kindly ask that you share it with the community for future reference and mark it as the correct answer.

Kautuk Sahni
iamnjain
Community Advisor
Community Advisor
April 25, 2025

Latest Update: The Same component dialog is working fine on AEMaaCS with no scroll to bottom but it scrolls to bottom when we add item in middle of nested multifield in AEM 6.5 

Is there any fix made by Adobe team on this or still it's open?
By any chance, can we confirm? @jagpreet_singh_ 

Appreciate your help, here.

@kchaura are you able to fix it?

charlie_ycAccepted solution
Level 2
June 4, 2025

I recently encountered a similar issue.

After some investigation, I found that the problem was caused by Coral 3's Nested Multifield — when clicking the Add button, it triggers a duplicate focus event, which causes the page to scroll to the wrong position.

To fix this, I chose to override the native _onAddItemClick method, which successfully resolved the scrolling issue.

Below is the code I used. Please note that this script must be loaded after the categories coralui3 library is fully loaded.

Hope this helps!

 

(function () { 'use strict'; Coral.Multifield.prototype._onAddItemClick = function (event) { var parent = event.target.closest("coral-multifield"); if (parent && parent === this) { event.stopPropagation(); this.items.add(new Coral.Multifield.Item); this.trigger("change"); this._trackEvent("click", "add item button", event); var addBtn = event.target; var items = this.items.getAll(); var setsize = items.length; var itemToFocus = items[setsize - 1]; window.requestAnimationFrame(function () { var focusableItem = itemToFocus.querySelector(Coral.commons.TABBABLE_ELEMENT_SELECTOR); if (focusableItem.hasAttribute("disabled")) addBtn.focus(); else focusableItem.focus() }); } }; }());
June 17, 2025

Would like to confirm that the above code snippet resolved the issue to me..