diff --git a/admin-dev/themes/new-theme/js/components/navbar-form-error-handler.ts b/admin-dev/themes/new-theme/js/components/navbar-form-error-handler.ts index 1d7e0db5e99a8..60547fde0bcb5 100644 --- a/admin-dev/themes/new-theme/js/components/navbar-form-error-handler.ts +++ b/admin-dev/themes/new-theme/js/components/navbar-form-error-handler.ts @@ -40,50 +40,50 @@ export default class NavbarFormErrorHandler { private readonly navbarHandler: NavbarHandler; - private firstInvalidField: HTMLElement | null = null; - constructor(options: NavbarFormErrorHandlerType) { this.navbarHandler = options.navbarHandler; this.form = options.form; this.initListener(); - this.resetInvalidField(); } - private findRequiredFieldsFromForm(): NodeListOf { - return this.form.querySelectorAll('[required]'); + private findAllFormFields(): NodeListOf { + return this.form.querySelectorAll('input, select, textarea'); } private initListener(): void { - this.findRequiredFieldsFromForm().forEach((field) => { - field.addEventListener('invalid', () => { - if (!this.firstInvalidField) { - this.firstInvalidField = field; + let isFirstInvalidField = false; - const tab = field.closest('[role="tabpanel"]'); + this.findAllFormFields().forEach((field) => { + field.addEventListener('invalid', () => { + if (isFirstInvalidField) { + return; + } - if (!tab || typeof tab === null) { - throw new Error('NavbarFormErrorHandler: Cannot find the tab that contains some form fields in error.'); - } + isFirstInvalidField = true; - if (!('id' in tab)) { - throw new Error('NavbarFormErrorHandler: Id missing from the tab.'); - } + const tab = field.closest('[role="tabpanel"]'); - this.navbarHandler.switchToTarget(`#${tab.id}`); + if (!tab || typeof tab === null) { + throw new Error('NavbarFormErrorHandler: Cannot find the tab that contains some form fields in error.'); + } - field.scrollIntoView({ - behavior: 'smooth', - block: 'end', - }); + if (!('id' in tab)) { + throw new Error('NavbarFormErrorHandler: Id missing from the tab.'); } + + this.navbarHandler.switchToTarget(`#${tab.id}`); + + field.scrollIntoView({ + behavior: 'smooth', + block: 'end', + }); + + // Set a timeout to reset the flag after the current event loop + setTimeout(() => { + isFirstInvalidField = false; + }, 0); }); }); } - - private resetInvalidField() { - this.form.addEventListener('click', () => { - this.firstInvalidField = null; - }, true); - } } diff --git a/admin-dev/themes/new-theme/js/pages/carrier/form/carrier-form-map.ts b/admin-dev/themes/new-theme/js/pages/carrier/form/carrier-form-map.ts index 6216d4839b3bd..d164f6ee64b70 100644 --- a/admin-dev/themes/new-theme/js/pages/carrier/form/carrier-form-map.ts +++ b/admin-dev/themes/new-theme/js/pages/carrier/form/carrier-form-map.ts @@ -29,7 +29,6 @@ export default { freeShippingInput: 'input[name="carrier[shipping_settings][is_free]"]', zonesInput: '#carrier_shipping_settings_zones', zoneIdOption: (zoneId: number|string): string => `option[value="${zoneId}"]`, - navigationBar: '#form-nav', rangesInput: '#carrier_shipping_settings_ranges_data', rangesSelectionAppId: '#carrier_shipping_settings_ranges-app', addRangeButton: '.js-add-carrier-ranges-btn',