From 0a7bf790c86a745202e128d401d83f2ea0561ef2 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Fri, 16 Oct 2026 14:12:20 -0500
Subject: [PATCH] perf(Autocomplete): enable React Compiler for
 AutocompleteInput

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Copilot-Session: e632d4e3-54d2-4423-9888-8e37b00494a3
---
 .changeset/react-compiler-autocomplete-input.md     |  5 +++++
 packages/react/script/react-compiler.mjs            |  1 -
 .../react/src/Autocomplete/AutocompleteInput.tsx    | 13 ++++++++-----
 3 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/react-compiler-autocomplete-input.md

diff --git a/.changeset/react-compiler-autocomplete-input.md b/.changeset/react-compiler-autocomplete-input.md
new file mode 100644
index 00000000000..c1a5695784b
--- /dev/null
+++ b/.changeset/react-compiler-autocomplete-input.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Autocomplete: Improve rendering performance with React Compiler support.
diff --git a/packages/react/script/react-compiler.mjs b/packages/react/script/react-compiler.mjs
index eda340e08dd..294557261bc 100644
--- a/packages/react/script/react-compiler.mjs
+++ b/packages/react/script/react-compiler.mjs
@@ -14,7 +14,6 @@ const files = glob
 const unsupportedPatterns = [
   'src/ActionMenu/ActionMenu.test.tsx',
   'src/AnchoredOverlay/AnchoredOverlay.tsx',
-  'src/Autocomplete/AutocompleteInput.tsx',
   'src/Dialog/Dialog.tsx',
   'src/FilteredActionList/FilteredActionList.tsx',
   'src/LabelGroup/LabelGroup.tsx',
diff --git a/packages/react/src/Autocomplete/AutocompleteInput.tsx b/packages/react/src/Autocomplete/AutocompleteInput.tsx
index 18a2ab14e3b..2949851f6c0 100644
--- a/packages/react/src/Autocomplete/AutocompleteInput.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteInput.tsx
@@ -6,6 +6,7 @@ import TextInput from '../TextInput'
 import {useMergedRefs} from '../hooks/useMergedRefs'
 import type {ComponentProps} from '../utils/types'
 import useSafeTimeout from '../hooks/useSafeTimeout'
+import {useEffectCallback} from '../internal/hooks/useEffectCallback'
 
 type InternalAutocompleteInputProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -48,6 +49,11 @@ const AutocompleteInput = React.forwardRef(
     const [highlightRemainingText, setHighlightRemainingText] = useState<boolean>(true)
     const {safeSetTimeout} = useSafeTimeout()
 
+    // Read the latest highlighting state without reapplying a suggestion on Backspace keyup.
+    const shouldHighlightRemainingText = useEffectCallback(() => {
+      return highlightRemainingText
+    })
+
     const handleInputFocus: FocusEventHandler<HTMLInputElement> = event => {
       onFocus?.(event)
       if (openOnFocus) {
@@ -158,8 +164,7 @@ const AutocompleteInput = React.forwardRef(
 
       if (
         isInputFocused &&
-        // eslint-disable-next-line react-you-might-not-need-an-effect/no-event-handler
-        highlightRemainingText &&
+        shouldHighlightRemainingText() &&
         autocompleteSuggestion &&
         (inputValue || isMenuDirectlyActivated)
       ) {
@@ -169,9 +174,7 @@ const AutocompleteInput = React.forwardRef(
           inputRef.current.setSelectionRange(inputValue.length, autocompleteSuggestion.length)
         }
       }
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated])
+    }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated, shouldHighlightRemainingText])
 
     useEffect(() => {
       setInputValue(typeof value !== 'undefined' ? value.toString() : '')