From fec2d94be0334f65b3233e22777a28458e541a9c Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Mon, 14 Oct 2024 09:55:29 +0200 Subject: [PATCH] :art: [open-formulieren/open-forms#4716] Replaced DOM query with ref --- src/formio/components/Checkbox.js | 2 +- src/formio/components/Currency.js | 2 +- src/formio/components/DateField.js | 2 +- src/formio/components/DateTimeField.js | 2 +- src/formio/components/Email.js | 2 +- src/formio/components/FileField.js | 2 +- src/formio/components/IBANField.js | 2 +- src/formio/components/Number.js | 2 +- src/formio/components/Password.js | 2 +- src/formio/components/PhoneNumberField.js | 2 +- src/formio/components/Radio.js | 2 +- src/formio/components/Select.js | 2 +- src/formio/components/Selectboxes.js | 2 +- src/formio/components/TextArea.js | 2 +- src/formio/components/TextField.js | 2 +- src/formio/components/TimeField.js | 2 +- src/formio/utils.js | 13 +++++-------- 17 files changed, 21 insertions(+), 24 deletions(-) diff --git a/src/formio/components/Checkbox.js b/src/formio/components/Checkbox.js index 0763111a5..5ef53908d 100644 --- a/src/formio/components/Checkbox.js +++ b/src/formio/components/Checkbox.js @@ -20,7 +20,7 @@ class Checkbox extends Formio.Components.components.checkbox { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } } diff --git a/src/formio/components/Currency.js b/src/formio/components/Currency.js index 37e6f0eb2..eda79ad6c 100644 --- a/src/formio/components/Currency.js +++ b/src/formio/components/Currency.js @@ -82,7 +82,7 @@ class Currency extends Formio.Components.components.currency { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/DateField.js b/src/formio/components/DateField.js index e34510cc7..0a4b14bc7 100644 --- a/src/formio/components/DateField.js +++ b/src/formio/components/DateField.js @@ -49,7 +49,7 @@ class DateField extends DateTimeField { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(targetElements, hasErrors, hasMessages, this.element); + setErrorAttributes(targetElements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(targetElements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/DateTimeField.js b/src/formio/components/DateTimeField.js index 2a961f452..5853a84ff 100644 --- a/src/formio/components/DateTimeField.js +++ b/src/formio/components/DateTimeField.js @@ -36,7 +36,7 @@ class DateTimeField extends DateTimeFormio { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(targetElements, hasErrors, hasMessages, this.element); + setErrorAttributes(targetElements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(targetElements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/Email.js b/src/formio/components/Email.js index cb0652790..3f1629fb0 100644 --- a/src/formio/components/Email.js +++ b/src/formio/components/Email.js @@ -22,7 +22,7 @@ class Email extends Formio.Components.components.email { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/FileField.js b/src/formio/components/FileField.js index 536714a0c..906d341a9 100644 --- a/src/formio/components/FileField.js +++ b/src/formio/components/FileField.js @@ -294,7 +294,7 @@ class FileField extends Formio.Components.components.file { setErrorClasses(elements, dirty, hasErrors, hasMessages) { const input = this.refs.fileBrowse; const targetElements = input ? [input] : []; - setErrorAttributes(targetElements, hasErrors, hasMessages, this.element); + setErrorAttributes(targetElements, hasErrors, hasMessages, this.refs.messageContainer.id); return super.setErrorClasses(targetElements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/IBANField.js b/src/formio/components/IBANField.js index f24a61414..166b8eeae 100644 --- a/src/formio/components/IBANField.js +++ b/src/formio/components/IBANField.js @@ -56,7 +56,7 @@ export default class IBANField extends TextField { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/Number.js b/src/formio/components/Number.js index 3afb24135..2c56b0638 100644 --- a/src/formio/components/Number.js +++ b/src/formio/components/Number.js @@ -37,7 +37,7 @@ class Number extends Formio.Components.components.number { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/Password.js b/src/formio/components/Password.js index 7e35cd13e..5b0fd4796 100644 --- a/src/formio/components/Password.js +++ b/src/formio/components/Password.js @@ -23,7 +23,7 @@ class Password extends Formio.Components.components.password { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/PhoneNumberField.js b/src/formio/components/PhoneNumberField.js index 09e30df9e..409afd3fa 100644 --- a/src/formio/components/PhoneNumberField.js +++ b/src/formio/components/PhoneNumberField.js @@ -49,7 +49,7 @@ class PhoneNumberField extends PhoneNumber { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/Radio.js b/src/formio/components/Radio.js index 2915d9817..796831a79 100644 --- a/src/formio/components/Radio.js +++ b/src/formio/components/Radio.js @@ -18,7 +18,7 @@ class Radio extends Formio.Components.components.radio { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } } diff --git a/src/formio/components/Select.js b/src/formio/components/Select.js index 0ca804306..51c9db0aa 100644 --- a/src/formio/components/Select.js +++ b/src/formio/components/Select.js @@ -19,7 +19,7 @@ class Select extends Formio.Components.components.select { setErrorClasses(elements, dirty, hasErrors, hasMessages) { const inputClone = this.element.querySelector('input:not([type="hidden"])'); const targetElements = inputClone ? [inputClone] : []; - setErrorAttributes(targetElements, hasErrors, hasMessages, this.element); + setErrorAttributes(targetElements, hasErrors, hasMessages, this.refs.messageContainer.id); return super.setErrorClasses(targetElements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/Selectboxes.js b/src/formio/components/Selectboxes.js index 0231d2971..1cce451b7 100644 --- a/src/formio/components/Selectboxes.js +++ b/src/formio/components/Selectboxes.js @@ -20,7 +20,7 @@ class Selectboxes extends Formio.Components.components.selectboxes { } setErrorClasses(elements, dirty, hasErrors, hasMessages) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } } diff --git a/src/formio/components/TextArea.js b/src/formio/components/TextArea.js index 6a18d9753..1bdc77147 100644 --- a/src/formio/components/TextArea.js +++ b/src/formio/components/TextArea.js @@ -21,7 +21,7 @@ class TextArea extends Formio.Components.components.textarea { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/TextField.js b/src/formio/components/TextField.js index 2b7805c2b..86c513e1b 100644 --- a/src/formio/components/TextField.js +++ b/src/formio/components/TextField.js @@ -42,7 +42,7 @@ class TextField extends Formio.Components.components.textfield { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/components/TimeField.js b/src/formio/components/TimeField.js index 0a7e0fce3..252f66e08 100644 --- a/src/formio/components/TimeField.js +++ b/src/formio/components/TimeField.js @@ -36,7 +36,7 @@ class TimeField extends Time { // setErrorAttributes cannot be done for a `multiple` component // https://github.com/open-formulieren/open-forms-sdk/pull/717#issuecomment-2405060364 if (!this.component.multiple) { - setErrorAttributes(elements, hasErrors, hasMessages, this.element); + setErrorAttributes(elements, hasErrors, hasMessages, this.refs.messageContainer.id); } return super.setErrorClasses(elements, dirty, hasErrors, hasMessages); } diff --git a/src/formio/utils.js b/src/formio/utils.js index 6809c4718..f91e819b6 100644 --- a/src/formio/utils.js +++ b/src/formio/utils.js @@ -14,24 +14,21 @@ const escapeHtml = source => { return pre.innerHTML.replace(/"/g, '"').replace(/'/g, ''').replace(/&/g, '&'); }; -const setErrorAttributes = (elements, hasErrors, hasMessages, parentElement) => { +const setErrorAttributes = (elements, hasErrors, hasMessages, messageContainerId) => { // Update the attributes 'aria-invalid' and 'aria-describedby' using hasErrors elements.forEach(element => { - const errorMessageElementId = parentElement.querySelector('[ref="messageContainer"]')?.id; let ariaDescriptions = (element.getAttribute('aria-describedby') || '') .split(' ') .filter(description => !!description); - if (hasErrors && hasMessages && !ariaDescriptions.includes(errorMessageElementId)) { + if (hasErrors && hasMessages && !ariaDescriptions.includes(messageContainerId)) { // The input has an error, but the error message isn't yet part of the ariaDescriptions - ariaDescriptions.push(errorMessageElementId); + ariaDescriptions.push(messageContainerId); } - if (!hasErrors && ariaDescriptions.includes(errorMessageElementId)) { + if (!hasErrors && ariaDescriptions.includes(messageContainerId)) { // The input doesn't have an error, but the error message is still a part of the ariaDescriptions - ariaDescriptions = ariaDescriptions.filter( - description => description !== errorMessageElementId - ); + ariaDescriptions = ariaDescriptions.filter(description => description !== messageContainerId); } if (ariaDescriptions.length > 0) {