fix: taxonomic filter help rendered next to main box (#17986)

- prevents overlap with the scroll bar - properly visualized when hovering elements at the bottom
PostHog · Oct 15, 2023 · 3616fa2 · 3616fa2
1 parent fb2ae44
commit 3616fa2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 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',
@@ -136,7 +139,11 @@ export function TaxonomicFilter({
                         />
                     </div>
                 ) : null}
-                <InfiniteSelectResults focusInput={focusInput} taxonomicFilterLogicProps={taxonomicFilterLogicProps} />
+                <InfiniteSelectResults
+                    focusInput={focusInput}
+                    taxonomicFilterLogicProps={taxonomicFilterLogicProps}
+                    popupAnchorElement={taxonomicFilterRef.current}
+                />
             </div>
         </BindLogic>
     )