Removed setElementValueAccessor; Fixed check constraints on value update

smikhalevski · Nov 11, 2023 · 263b785 · 263b785
1 parent dba01ff
commit 263b785
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 28 deletions.
diff --git a/packages/constraint-validation-plugin/src/main/constraintValidationPlugin.ts b/packages/constraint-validation-plugin/src/main/constraintValidationPlugin.ts
@@ -123,12 +123,14 @@ export function constraintValidationPlugin(): PluginInjector<ConstraintValidatio
       isInvalid: { configurable: true, get: () => field.errorCount !== 0 },
     });
 
-    const changeListener: EventListener = event => {
-      if (field.element === event.currentTarget && isValidatable(field.element)) {
+    const changeListener = () => {
+      if (isValidatable(field.element)) {
         dispatchEvents(setError(field, field.element.validationMessage, 1, []));
       }
     };
 
+    field.on('change:value', changeListener);
+
     const { ref } = field;
 
     field.ref = element => {
@@ -138,7 +140,6 @@ export function constraintValidationPlugin(): PluginInjector<ConstraintValidatio
       }
 
       if (field.element !== null) {
-        // Disconnect from the current element
         field.element.removeEventListener('input', changeListener);
         field.element.removeEventListener('change', changeListener);
         field.element.removeEventListener('invalid', changeListener);
@@ -147,7 +148,6 @@ export function constraintValidationPlugin(): PluginInjector<ConstraintValidatio
       const events: Event[] = [];
 
       if (isValidatable(element)) {
-        // Connect to the new element
         element.addEventListener('input', changeListener);
         element.addEventListener('change', changeListener);
         element.addEventListener('invalid', changeListener);
@@ -159,7 +159,6 @@ export function constraintValidationPlugin(): PluginInjector<ConstraintValidatio
       } else {
         field.element = field.validity = null;
 
-        // Delete the associated constraint error
         deleteError(field, 1, events);
       }
 

diff --git a/packages/uncontrolled-plugin/src/main/createElementValueAccessor.ts b/packages/uncontrolled-plugin/src/main/createElementValueAccessor.ts
@@ -8,15 +8,15 @@ export interface ElementValueAccessor {
    * @param elements The array of referenced elements, never empty.
    * @return The value that elements represent.
    */
-  get(elements: any[]): any;
+  get(elements: readonly any[]): any;
 
   /**
    * Sets value to elements controlled by the field.
    *
    * @param elements The array of referenced elements, never empty.
    * @param value The value to assign to elements.
    */
-  set(elements: any[], value: any): void;
+  set(elements: readonly any[], value: any): void;
 }
 
 /**

diff --git a/packages/uncontrolled-plugin/src/main/uncontrolledPlugin.ts b/packages/uncontrolled-plugin/src/main/uncontrolledPlugin.ts
@@ -30,19 +30,12 @@ export interface UncontrolledPlugin {
   ['elementValueAccessor']: ElementValueAccessor;
 
   /**
-   * The adds the DOM element to {@link observedElements observed elements}.
+   * Adds the DOM element to {@link observedElements observed elements}.
    *
    * @param element The element to observe. No-op if the element is `null` or not connected to the DOM.
    */
   observe(element: Element | null): void;
 
-  /**
-   * Overrides {@link elementValueAccessor the element value accessor} for this field.
-   *
-   * @param accessor The accessor to use for this filed.
-   */
-  setElementValueAccessor(accessor: ElementValueAccessor): this;
-
   /**
    * Subscribes to updates of {@link observedElements observed elements}.
    *
@@ -75,7 +68,6 @@ export function uncontrolledPlugin(accessor = elementValueAccessor): PluginInjec
     const mutationObserver = new MutationObserver(mutations => {
       const events: Event[] = [];
       const { observedElements } = field;
-      const [element] = observedElements;
 
       for (const mutation of mutations) {
         for (let i = 0; i < mutation.removedNodes.length; ++i) {
@@ -98,7 +90,7 @@ export function uncontrolledPlugin(accessor = elementValueAccessor): PluginInjec
       if (observedElements.length === 0) {
         mutationObserver.disconnect();
         field.ref?.(null);
-      } else if (element !== observedElements[0]) {
+      } else {
         field.ref?.(observedElements[0]);
       }
 
@@ -125,33 +117,28 @@ export function uncontrolledPlugin(accessor = elementValueAccessor): PluginInjec
       const { observedElements } = field;
 
       if (
-        element === null ||
         !(element instanceof Element) ||
         !element.isConnected ||
-        observedElements.indexOf(element) !== -1
+        element.parentNode === null ||
+        observedElements.includes(element)
       ) {
         return;
       }
 
-      mutationObserver.observe(element.parentNode!, { childList: true });
+      mutationObserver.observe(element.parentNode, { childList: true });
 
       element.addEventListener('input', changeListener);
       element.addEventListener('change', changeListener);
 
-      observedElements.push(element);
+      const elementCount = observedElements.push(element);
 
       field.elementValueAccessor.set(observedElements, field.value);
 
-      if (observedElements.length === 1) {
-        field.ref?.(observedElements[0]);
+      if (elementCount === 1) {
+        field.ref?.(element);
       }
 
       dispatchEvents([createEvent(EVENT_CHANGE_OBSERVED_ELEMENTS, field, element)]);
     };
-
-    field.setElementValueAccessor = accessor => {
-      field.elementValueAccessor = accessor;
-      return field;
-    };
   };
 }