From b651d70d73b5693ebafc301177aed275c1a17e29 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Wed, 2 Mar 2022 13:58:32 +0100 Subject: [PATCH] Menu: Fix typeahead with leading visuals (#1914) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Trim textContent to ignore leading visual * Create slimy-garlics-wash.md * Menu → ActionMenu --- .changeset/slimy-garlics-wash.md | 5 +++++ src/hooks/useTypeaheadFocus.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/slimy-garlics-wash.md diff --git a/.changeset/slimy-garlics-wash.md b/.changeset/slimy-garlics-wash.md new file mode 100644 index 00000000000..0b2afb519f8 --- /dev/null +++ b/.changeset/slimy-garlics-wash.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +ActionMenu: Fix typeahead with leading visuals diff --git a/src/hooks/useTypeaheadFocus.ts b/src/hooks/useTypeaheadFocus.ts index 727e077861c..7cc20ab701f 100644 --- a/src/hooks/useTypeaheadFocus.ts +++ b/src/hooks/useTypeaheadFocus.ts @@ -49,7 +49,7 @@ export const useTypeaheadFocus = (open: boolean, providedRef?: React.RefObject { const itemsStartingWithKey = focusableItems.filter(item => { - return item.textContent?.toLowerCase().startsWith(query) + return item.textContent?.toLowerCase().trim().startsWith(query) }) const currentActiveIndex = itemsStartingWithKey.indexOf(activeElement)