v7 fix: Autofill only sets selectionRange when in focus (#25972)

microsoft · Dec 13, 2022 · 0bb189f · 0bb189f
1 parent cbb8529
commit 0bb189f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/change/office-ui-fabric-react-958eb5bc-6d4b-4099-898b-db6835440d14.json b/change/office-ui-fabric-react-958eb5bc-6d4b-4099-898b-db6835440d14.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Autofill only sets input selectionRange if input is in focus",
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
@@ -94,7 +94,10 @@ export class Autofill extends React.Component<IAutofillProps, IAutofillState> im
       return;
     }
 
+    const isFocused = this._inputElement.current && this._inputElement.current === document.activeElement;
+
     if (
+      isFocused &&
       this._autoFillEnabled &&
       value &&
       suggestedDisplayValue &&
@@ -106,17 +109,17 @@ export class Autofill extends React.Component<IAutofillProps, IAutofillState> im
         shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate();
       }
 
-      if (shouldSelectFullRange && this._inputElement.current) {
-        this._inputElement.current.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD);
+      if (shouldSelectFullRange) {
+        this._inputElement.current!.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD);
       } else {
         while (
           differenceIndex < value.length &&
           value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()
         ) {
           differenceIndex++;
         }
-        if (differenceIndex > 0 && this._inputElement.current) {
-          this._inputElement.current.setSelectionRange(
+        if (differenceIndex > 0) {
+          this._inputElement.current!.setSelectionRange(
             differenceIndex,
             suggestedDisplayValue.length,
             SELECTION_BACKWARD,