fix: reset selection range when selecting option with cursor (microso…

…ft#5834) * reset selection range when selecting option with cursor * Change files Co-authored-by: Chris Holt <chhol@microsoft.com>
vnextcoder · May 4, 2022 · 5b82a4b · 5b82a4b
1 parent 960cfeb
commit 5b82a4b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/change/@microsoft-fast-foundation-7bb63e34-a45b-49f0-a9c0-7b9d0f2f5e95.json b/change/@microsoft-fast-foundation-7bb63e34-a45b-49f0-a9c0-7b9d0f2f5e95.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "reset selection range when selecting option with cursor",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "abris96@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/combobox/combobox.ts b/packages/web-components/fast-foundation/src/combobox/combobox.ts
@@ -281,6 +281,7 @@ export class Combobox extends FormAssociatedCombobox {
 
             this.selectedOptions = [captured];
             this.control.value = captured.text;
+            this.clearSelectionRange();
             this.updateValue(true);
         }
 
@@ -433,8 +434,7 @@ export class Combobox extends FormAssociatedCombobox {
                 }
 
                 this.open = false;
-                const controlValueLength = this.control.value.length;
-                this.control.setSelectionRange(controlValueLength, controlValueLength);
+                this.clearSelectionRange();
                 break;
             }
 
@@ -667,6 +667,14 @@ export class Combobox extends FormAssociatedCombobox {
             this.$emit("change");
         }
     }
+
+    /**
+     * @internal
+     */
+    private clearSelectionRange() {
+        const controlValueLength = this.control.value.length;
+        this.control.setSelectionRange(controlValueLength, controlValueLength);
+    }
 }
 
 /**