fix(ASSETS-6927): Upon invoking the “Add” button present in the page,…

… focus is not shifted to the newly identified field. (#252)

* shift focus to newly added input

* update child selector

* refactor & fix tests

* update input selector

* handle unfocusable elements

* clean up

* rename variables

* focus the add btn if new item is disabled

coral-component-multifield/src/scripts/Multifield.js

@@ -302,6 +302,19 @@ const Multifield = Decorator(class extends BaseComponent(HTMLElement) {
         this.trigger('change');
 
         this._trackEvent('click', 'add item button', event);
+
+        // Focus the newly created input if it can receive focus
+        var addBtn = event.target;
+        const items = this.items.getAll();
+        const setsize = items.length;
+        const itemToFocus = items[setsize - 1];
+        const focusableItem = itemToFocus.querySelector(commons.TABBABLE_ELEMENT_SELECTOR);
+
+        if (focusableItem.hasAttribute('disabled')) {
+          addBtn.focus();
+        } else {
+          focusableItem.focus();
+        }
       });
     }
   }

coral-component-multifield/src/tests/test.Multifield.js

@@ -11,7 +11,7 @@
  */
 
 import {helpers} from '../../../coral-utils/src/tests/helpers';
-import {tracking, i18n} from '../../../coral-utils';
+import {tracking, i18n, commons} from '../../../coral-utils';
 import {Multifield} from '../../../coral-component-multifield';
 
 describe('Multifield', function () {
@@ -727,6 +727,25 @@ describe('Multifield', function () {
       });
     });
 
+    it('should focus the input in item after adding new item', function (done) {
+      const el = helpers.build(window.__html__['Multifield.base.html']);
+      el.querySelector('[coral-multifield-add]').click();
+      helpers.next(function() {
+        const items = el.items.getAll();
+        const setsize = items.length;
+        const itemToFocus = items[setsize - 1];
+        const focusableItem = itemToFocus.querySelector(commons.TABBABLE_ELEMENT_SELECTOR);
+        if (focusableItem.hasAttribute('disabled')) {
+          const hasFocus = document.activeElement === focusableItem;
+          expect(hasFocus).to.be.false;
+        } else {
+          const hasFocus = document.activeElement === focusableItem;
+          expect(hasFocus).to.be.true;
+        }
+        done();
+      });
+    });
+
     describe('keyboard reordering', function () {
       it('should toggle aria-grabbed and force forms mode when move button is clicked', function () {
         const el = helpers.build(window.__html__['Multifield.base.html']);