fix(input): remove setTimeout

ovh · Nov 28, 2024 · fe8932b · fe8932b
1 parent dfc7247
commit fe8932b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 31 deletions.
diff --git a/packages/ods/src/components/input/src/components/ods-input/ods-input.tsx b/packages/ods/src/components/input/src/components/ods-input/ods-input.tsx
@@ -21,6 +21,7 @@ export class OdsInput {
   private hasMovedNodes: boolean = false;
   private observer?: MutationObserver;
   private inputEl?: HTMLInputElement;
+  private updateIsInvalid: boolean = false;
 
   @Element() el!: HTMLElement;
 
@@ -77,7 +78,7 @@ export class OdsInput {
     this.odsClear.emit();
     this.value = null;
     this.inputEl?.focus();
-    setTimeout(() => this.isInvalid = !this.internals.validity.valid, 0);
+    this.updateIsInvalid = true;
   }
 
   @Method()
@@ -99,7 +100,7 @@ export class OdsInput {
   async reset(): Promise<void> {
     this.odsReset.emit();
     this.value = this.defaultValue ?? null;
-    setTimeout(() => this.isInvalid = !this.internals.validity.valid, 0);
+    this.updateIsInvalid = true;
   }
 
   @Method()
@@ -204,6 +205,12 @@ export class OdsInput {
   private onValueChange(previousValue?: string | number | null): void {
     updateInternals(this.internals, this.value, this.inputEl);
 
+    // update here after update internals
+    if (this.updateIsInvalid) {
+      this.isInvalid = !this.internals.validity.valid;
+      this.updateIsInvalid = false;
+    }
+
     this.odsChange.emit({
       name: this.name,
       previousValue, // TODO always string if coming from mutation oldValue => need to parse if type number

diff --git a/packages/ods/src/components/input/src/index.html b/packages/ods/src/components/input/src/index.html
@@ -52,6 +52,12 @@
 <!--  <p>Pattern</p>-->
 <!--  <ods-input pattern="[^12]+">-->
 <!--  </ods-input>-->
+    <!-- <script>
+      const inputPattern = document.getElementById('my-input-pattern');
+      inputPattern.addEventListener('odsChange', (event) => {
+        inputPattern.hasError = !event.detail.validity.valid;
+      });
+    </script> -->
 
 <!--  <p>Readonly</p>-->
 <!--  <ods-input value="Readonly" is-readonly>-->
@@ -163,35 +169,35 @@
 <!--  <button id="toggle-mask-button">toggleMask</button>-->
 <!--  <button id="get-validity-button">getValidity</button>-->
 
-<!--  <script>-->
-<!--    const inputPattern = document.getElementById('my-input-pattern');-->
-
-<!--    inputPattern.addEventListener('odsChange', (event) => {-->
-<!--      inputPattern.hasError = !event.detail.validity.valid;-->
-<!--    });-->
-<!--    const input = document.getElementById('input-methods');-->
-<!--    const clearButton = document.getElementById('clear-button');-->
-<!--    const resetButton = document.getElementById('reset-button');-->
-<!--    const getValidityButton = document.getElementById('get-validity-button');-->
-<!--    const toggleMaskButton = document.getElementById('toggle-mask-button');-->
-
-<!--    clearButton.addEventListener('click', () => input.clear());-->
-<!--    resetButton.addEventListener('click', () => input.reset());-->
-<!--    getValidityButton.addEventListener('click', async () => {-->
-<!--      const validity = await input.getValidity();-->
-<!--      console.log('validity', validity);-->
-<!--    });-->
-<!--    toggleMaskButton.addEventListener('click', () => input.toggleMask());-->
-
-<!--    const form = document.getElementById('input-form');-->
-<!--    const resetFormButton = document.getElementById('form-reset-button');-->
-<!--    const submitFormButton = document.getElementById('form-submit-button');-->
-
-<!--    submitFormButton.addEventListener('click', () => {-->
-<!--      const formData = new FormData(form);-->
-<!--      console.log('formData', formData);-->
-<!--    });-->
-<!--  </script>-->
+  <p>Methods</p>
+  <ods-input id="input-methods" is-required default-value="rest">
+  </ods-input>
+  <button id="clear-button">clear</button>
+  <button id="reset-button">reset</button>
+  <button id="toggle-mask-button">toggleMask</button>
+  <button id="get-validity-button">getValidity</button>
+
+  <script>
+    const input = document.getElementById('input-methods');
+    const clearButton = document.getElementById('clear-button');
+    const resetButton = document.getElementById('reset-button');
+    const getValidityButton = document.getElementById('get-validity-button');
+    const toggleMaskButton = document.getElementById('toggle-mask-button');
+    clearButton.addEventListener('click', () => input.clear());
+    resetButton.addEventListener('click', () => input.reset());
+    getValidityButton.addEventListener('click', async () => {
+      const validity = await input.getValidity();
+      console.log('validity', validity);
+    });
+    toggleMaskButton.addEventListener('click', () => input.toggleMask());
+    const form = document.getElementById('input-form');
+    const resetFormButton = document.getElementById('form-reset-button');
+    const submitFormButton = document.getElementById('form-submit-button');
+    submitFormButton.addEventListener('click', () => {
+      const formData = new FormData(form);
+      console.log('formData', formData);
+    });
+  </script>
 
 <!--  <p>With label</p>-->
 <!--  <label for="labelled-input">My input</label>-->