better input mask

src/lib/input-mask/input-mask.element.ts

@@ -46,14 +46,13 @@ export class USAInputMaskElement extends HTMLElement {
     const offset = input.value.length - prev.length;
     const maskChar = mask[selectionStart - 1] as PatternChar | undefined;
 
-    // This is a hack to make sure that changes are propagated appropriately
-    await Promise.resolve();
-
     // check if the current value is not a space for characters and has an offset greater then 0
     if (maskChar && !PATTERN_CHARS.includes(maskChar) && offset > 0) {
-      input.setSelectionRange(selectionStart + offset, selectionStart + offset);
+      input.selectionStart = selectionStart + offset;
+      input.selectionEnd = selectionStart + offset;
     } else {
-      input.setSelectionRange(selectionStart, selectionStart);
+      input.selectionStart = selectionStart;
+      input.selectionEnd = selectionStart;
     }
 
     if (prev !== input.value) {

src/lib/input-mask/input-mask.stories.ts

@@ -15,7 +15,6 @@ const meta = {
           placeholder=${args.mask}
           autocomplete="off"
           mask=${args.mask}
-          value="3042616138"
         >
           Phone:
         </usa-input>

src/lib/input-mask/maskable.element.ts

@@ -1,5 +1,5 @@
 export interface MaskableElement extends HTMLElement {
   value: string;
   selectionStart: number | null;
-  setSelectionRange(start: number, end: number): void;
+  selectionEnd: number | null;
 }

src/lib/input/input.element.ts

@@ -80,21 +80,15 @@ export class USATextInputElement
   @observe()
   accessor value = "";
 
-  get selectionStart() {
-    const { selectionStart } = this.#input();
+  @observe()
+  accessor selectionStart: number | null = null;
 
-    return selectionStart;
-  }
+  @observe()
+  accessor selectionEnd: number | null = null;
 
   #internals = this.attachInternals();
   #input = query("input");
 
-  setSelectionRange(start: number, end: number) {
-    const input = this.#input();
-
-    input.setSelectionRange(start, end);
-  }
-
   @ready()
   onReady() {
     const input = this.#input();
@@ -104,16 +98,21 @@ export class USATextInputElement
   @effect()
   onChange() {
     const input = this.#input();
+
     input.value = this.value;
+    input.selectionStart = this.selectionStart;
+    input.selectionEnd = this.selectionEnd;
   }
 
   @listen("input")
   onInputChange() {
     const input = this.#input();
 
-    this.#internals.setFormValue(input.value);
-
     this.value = input.value;
+    this.selectionStart = input.selectionStart;
+    this.selectionEnd = input.selectionEnd;
+
+    this.#internals.setFormValue(input.value);
   }
 
   attributeChangedCallback(attr: string) {

src/lib/input/input.stories.ts

@@ -10,7 +10,7 @@ const meta = {
   render() {
     return html`
       <form>
-        <usa-input name="fname" value="Danny" autocomplete="off" foo="test">
+        <usa-input name="fname" value="Danny" autocomplete="off">
           First name
         </usa-input>