🎨 [open-formulieren/open-forms#4716] Replaced DOM query with ref

open-formulieren · Oct 24, 2024 · fec2d94 · fec2d94
1 parent 724958c
commit fec2d94
Show file tree

Hide file tree

Showing 17 changed files with 21 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -14,24 +14,21 @@ const escapeHtml = source => {
   return pre.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&apos;').replace(/&/g, '&amp;');
 };
 
-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) {