From ce45de308f1aaaf760a8e3f18ee39f20610f896b Mon Sep 17 00:00:00 2001
From: Will Glas <35304767+willglas@users.noreply.github.com>
Date: Tue, 28 Jun 2022 11:21:19 -0400
Subject: [PATCH] Add AutocompleteContext to Autocomplete component exports
 (#2153)

---
 .changeset/dry-stingrays-drum.md  |  5 +++
 docs/content/Autocomplete.mdx     | 58 +++++++++++++++++++++++++++++++
 src/Autocomplete/Autocomplete.tsx |  1 +
 3 files changed, 64 insertions(+)
 create mode 100644 .changeset/dry-stingrays-drum.md

diff --git a/.changeset/dry-stingrays-drum.md b/.changeset/dry-stingrays-drum.md
new file mode 100644
index 00000000000..8af8e4f2584
--- /dev/null
+++ b/.changeset/dry-stingrays-drum.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add AutocompleteContext to Autocomplete component exports
diff --git a/docs/content/Autocomplete.mdx b/docs/content/Autocomplete.mdx
index db51f35e0ca..405d4b15d4f 100644
--- a/docs/content/Autocomplete.mdx
+++ b/docs/content/Autocomplete.mdx
@@ -579,6 +579,64 @@ const MultiSelectAddNewItem = () => {
 render(<MultiSelectAddNewItem />)
 ```
 
+#### Rendered with `Autocomplete.Context`
+
+The `Autocomplete.Context` can be used to control the menu open/closed state and customize certain `Autocomplete` behaviors
+
+```javascript live noinline
+export function AutocompleteWithContext() {
+  return (
+    <Autocomplete>
+      <AutocompleteWithContextInternal />
+    </Autocomplete>
+  )
+}
+
+export function AutocompleteWithContextInternal() {
+  const autocompleteContext = useContext(Autocomplete.Context)
+  if (autocompleteContext === null) {
+    throw new Error('AutocompleteContext returned null values')
+  }
+
+  const {setShowMenu, showMenu} = autocompleteContext
+  const inputRef = useRef < HTMLInputElement > null
+  const [filterText, setFilterText] = useState('')
+
+  useEffect(() => {
+    if (!showMenu) {
+      // keep the menu open
+      setShowMenu(true)
+    }
+  }, [showMenu, setShowMenu])
+
+  const change = event => setFilterText?.(event.target.value)
+
+  return (
+    <Autocomplete.Context.Provider
+      value={{...autocompleteContext, autocompleteSuggestion: '', setAutocompleteSuggestion: () => false}}
+    >
+      <Autocomplete.Input ref={inputRef} value={filterText} onChange={change} />
+      <Autocomplete.Overlay>
+        <Autocomplete.Menu
+          items={[
+            {text: 'main', id: 0},
+            {text: 'autocomplete-tests', id: 1},
+            {text: 'a11y-improvements', id: 2},
+            {text: 'button-bug-fixes', id: 3},
+            {text: 'radio-input-component', id: 4},
+            {text: 'release-1.0.0', id: 5},
+            {text: 'text-input-implementation', id: 6},
+            {text: 'visual-design-tweaks', id: 7}
+          ]}
+          selectedItemIds={[]}
+          selectionVariant="single"
+        />
+      </Autocomplete.Overlay>
+    </Autocomplete.Context.Provider>
+  )
+}
+```
+
 ## Props
 
 ### Autocomplete.Input
diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx
index d06b1f44bac..602a93c758a 100644
--- a/src/Autocomplete/Autocomplete.tsx
+++ b/src/Autocomplete/Autocomplete.tsx
@@ -97,6 +97,7 @@ export type {AutocompleteInputProps} from './AutocompleteInput'
 export type {AutocompleteMenuProps} from './AutocompleteMenu'
 export type {AutocompleteOverlayProps} from './AutocompleteOverlay'
 export default Object.assign(Autocomplete, {
+  Context: AutocompleteContext,
   Input: AutocompleteInput,
   Menu: AutocompleteMenu,
   Overlay: AutocompleteOverlay