From 824e62bd1f98c774d40ccf6f383ed67d13528b43 Mon Sep 17 00:00:00 2001 From: Phillip Kelley-Dotson Date: Thu, 21 Oct 2021 20:25:25 -0700 Subject: [PATCH] fix: dropdown placement for cascading filters popover (#17046) * inital fix * remove content wrapper * allow dropdown to overflow in long chart * only pass through filtercontrol * change to auto * add ref and pass to child * fix bug * fix lint * add type * remove code * add currrent param --- .../CascadeFilterControl/index.tsx | 7 ++++-- .../CascadeFilters/CascadePopover/index.tsx | 25 ++++++++++++++----- .../FilterControls/FilterControl.tsx | 4 +++ .../FilterBar/FilterControls/FilterValue.tsx | 4 +++ .../FilterBar/FilterControls/types.ts | 4 ++- .../components/Select/SelectFilterPlugin.tsx | 5 ++++ .../src/filters/components/Select/types.ts | 2 ++ 7 files changed, 42 insertions(+), 9 deletions(-) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx index 75d6497fab..5b3085625d 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl/index.tsx @@ -16,7 +16,7 @@ * specific language governing permissions and limitations * under the License. */ -import React from 'react'; +import React, { RefObject } from 'react'; import { styled, DataMask } from '@superset-ui/core'; import FilterControl from 'src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl'; import { CascadeFilter } from 'src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/types'; @@ -28,6 +28,7 @@ export interface CascadeFilterControlProps { filter: CascadeFilter; directPathToChild?: string[]; onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void; + parentRef?: RefObject; } const StyledDiv = styled.div` @@ -35,7 +36,6 @@ const StyledDiv = styled.div` width: 100%; flex-direction: column; align-items: center; - .ant-form-item { margin-bottom: ${({ theme }) => theme.gridUnit * 4}px; } @@ -46,12 +46,15 @@ const CascadeFilterControl: React.FC = ({ filter, directPathToChild, onFilterSelectionChange, + parentRef, }) => ( <> diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx index 3dc13fe4f9..60cc4d6005 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx @@ -16,7 +16,13 @@ * specific language governing permissions and limitations * under the License. */ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { + useCallback, + useEffect, + useMemo, + useState, + useRef, +} from 'react'; import { styled, t, DataMask, css, SupersetTheme } from '@superset-ui/core'; import Popover from 'src/components/Popover'; import Icons from 'src/components/Icons'; @@ -74,9 +80,9 @@ const StyledPill = styled(Pill)` background: ${({ theme }) => theme.colors.grayscale.light1}; `; -const ContentWrapper = styled.div` +const ContentStyles = styled.div` max-height: 700px; - overflow-y: auto; + overflow: auto; `; const CascadePopover: React.FC = ({ @@ -90,6 +96,7 @@ const CascadePopover: React.FC = ({ }) => { const [currentPathToChild, setCurrentPathToChild] = useState(); const dataMask = dataMaskSelected[filter.id]; + const parent = useRef(); useEffect(() => { setCurrentPathToChild(directPathToChild); @@ -178,7 +185,7 @@ const CascadePopover: React.FC = ({ ); const content = ( - + = ({ filter={filter} directPathToChild={visible ? currentPathToChild : undefined} onFilterSelectionChange={onFilterSelectionChange} + parentRef={parent} /> - + ); return ( @@ -199,7 +207,12 @@ const CascadePopover: React.FC = ({ onVisibleChange={onVisibleChange} placement="rightTop" id={filter.id} - overlayStyle={{ width: '400px' }} + overlayStyle={{ + width: '400px', + position: 'relative', + overflow: 'auto', + }} + ref={parent} >
{activeFilters.map(activeFilter => ( diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx index 72399c455d..b4fca06f3c 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx @@ -59,6 +59,8 @@ const FilterControl: React.FC = ({ onFilterSelectionChange, directPathToChild, inView, + showOverflow, + parentRef, }) => { const { name = '' } = filter; @@ -89,9 +91,11 @@ const FilterControl: React.FC = ({ diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx index 20b88b6368..60cf35bcd7 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx @@ -68,6 +68,8 @@ const FilterValue: React.FC = ({ directPathToChild, onFilterSelectionChange, inView = true, + showOverflow, + parentRef, }) => { const { id, targets, filterType, adhoc_filters, time_range } = filter; const metadata = getChartMetadataRegistry().get(filterType); @@ -251,7 +253,9 @@ const FilterValue: React.FC = ({ void; inView?: boolean; + showOverflow?: boolean; + parentRef?: RefObject; } diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx index 68475ec0f2..37479523ed 100644 --- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx +++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx @@ -82,6 +82,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { setFocusedFilter, unsetFocusedFilter, appSection, + showOverflow, + parentRef, } = props; const { enableEmptyFilter, @@ -285,6 +287,9 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { // @ts-ignore value={filterState.value || []} disabled={isDisabled} + getPopupContainer={ + showOverflow ? () => parentRef?.current : undefined + } showSearch={showSearch} mode={multiSelect ? 'multiple' : 'single'} placeholder={placeholderText} diff --git a/superset-frontend/src/filters/components/Select/types.ts b/superset-frontend/src/filters/components/Select/types.ts index 11e1d1d66f..58124bbf94 100644 --- a/superset-frontend/src/filters/components/Select/types.ts +++ b/superset-frontend/src/filters/components/Select/types.ts @@ -59,6 +59,8 @@ export type PluginFilterSelectProps = PluginFilterStylesProps & { formData: PluginFilterSelectQueryFormData; filterState: FilterState; isRefreshing: boolean; + showOverflow: boolean; + parentRef?: RefObject; } & PluginFilterHooks; export const DEFAULT_FORM_DATA: PluginFilterSelectCustomizeProps = {