diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx index 6ebaf5fce357d..858327ea35721 100644 --- a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx +++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx @@ -23,6 +23,10 @@ import { pluralize } from 'lib/utils' import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton' import { useState } from 'react' +export interface InfiniteListProps { + popupAnchorElement: HTMLDivElement | null +} + const staleIndicator = (parsedLastSeen: dayjs.Dayjs | null): JSX.Element => { return ( (mouseInteractionsEnabled && !showPopover ? setIndex(NO_ITEM_SELECTED) : null), style: style, - ref: isHighlighted ? (element) => setHighlightedItemElement(element) : null, + ref: isHighlighted + ? (element) => { + setHighlightedItemElement(element && popupAnchorElement ? popupAnchorElement : element) + } + : null, } return item && group ? ( diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx index 3078f7068fc19..5496ec2b95e6e 100644 --- a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx +++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx @@ -9,6 +9,7 @@ import clsx from 'clsx' export interface InfiniteSelectResultsProps { focusInput: () => void taxonomicFilterLogicProps: TaxonomicFilterLogicProps + popupAnchorElement: HTMLDivElement | null } function CategoryPill({ @@ -53,6 +54,7 @@ function CategoryPill({ export function InfiniteSelectResults({ focusInput, taxonomicFilterLogicProps, + popupAnchorElement, }: InfiniteSelectResultsProps): JSX.Element { const { activeTab, taxonomicGroups, taxonomicGroupTypes, activeTaxonomicGroup, value } = useValues(taxonomicFilterLogic) @@ -66,7 +68,7 @@ export function InfiniteSelectResults({ onChange={(newValue) => selectItem(activeTaxonomicGroup, newValue, newValue)} /> ) : ( - + ) if (taxonomicGroupTypes.length === 1) { diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx index f9d6089ed7c88..87280adf25c60 100644 --- a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx +++ b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx @@ -69,9 +69,12 @@ export function TaxonomicFilter({ ...(height ? { height } : {}), } + const taxonomicFilterRef = useRef(null) + return (
} onKeyDown={(e) => { - if (e.key === 'ArrowUp') { - e.preventDefault() - moveUp() - } - if (e.key === 'ArrowDown') { - e.preventDefault() - moveDown() - } - if (e.key === 'Tab') { - e.preventDefault() - if (e.shiftKey) { - tabLeft() - } else { - tabRight() - } - } - - if (e.key === 'Enter') { - e.preventDefault() - selectSelected() + let shouldPreventDefault = true + switch (e.key) { + case 'ArrowUp': + moveUp() + break + case 'ArrowDown': + moveDown() + break + case 'Tab': + e.shiftKey ? tabLeft() : tabRight() + break + case 'Enter': + selectSelected() + break + case 'Escape': + onClose?.() + break + default: + shouldPreventDefault = false } - if (e.key === 'Escape') { + if (shouldPreventDefault) { e.preventDefault() - onClose?.() } }} ref={searchInputRef} @@ -138,7 +139,11 @@ export function TaxonomicFilter({ />
) : null} - +
)