Fix/overlap taxonomic filter popup with scroll (#17987)

PostHog · Oct 17, 2023 · 6db6fab · 6db6fab
1 parent 1fb0548
commit 6db6fab
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 26 deletions.
diff --git 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 (
         <Tooltip
@@ -148,7 +152,7 @@ const selectedItemHasPopover = (
     )
 }
 
-export function InfiniteList(): JSX.Element {
+export function InfiniteList({ popupAnchorElement }: InfiniteListProps): JSX.Element {
     const { mouseInteractionsEnabled, activeTab, searchQuery, value, groupType, eventNames } =
         useValues(taxonomicFilterLogic)
     const { selectItem } = useActions(taxonomicFilterLogic)
@@ -191,7 +195,11 @@ export function InfiniteList(): JSX.Element {
             // if the popover is not enabled then don't leave the row selected when the mouse leaves it
             onMouseLeave: () => (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
@@ -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)}
         />
     ) : (
-        <InfiniteList />
+        <InfiniteList popupAnchorElement={popupAnchorElement} />
     )
 
     if (taxonomicGroupTypes.length === 1) {

diff --git 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<HTMLInputElement | null>(null)
+
     return (
         <BindLogic logic={taxonomicFilterLogic} props={taxonomicFilterLogicProps}>
             <div
+                ref={taxonomicFilterRef}
                 className={clsx(
                     'taxonomic-filter',
                     taxonomicGroupTypes.length === 1 && 'one-taxonomic-tab',
@@ -107,38 +110,40 @@ export function TaxonomicFilter({
                                 </Tooltip>
                             }
                             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}
                             onChange={(newValue) => setSearchQuery(newValue)}
                         />
                     </div>
                 ) : null}
-                <InfiniteSelectResults focusInput={focusInput} taxonomicFilterLogicProps={taxonomicFilterLogicProps} />
+                <InfiniteSelectResults
+                    focusInput={focusInput}
+                    taxonomicFilterLogicProps={taxonomicFilterLogicProps}
+                    popupAnchorElement={taxonomicFilterRef.current}
+                />
             </div>
         </BindLogic>
     )