From 44d84b6c7ff7ff4c59a4baf1946032b64109aff9 Mon Sep 17 00:00:00 2001
From: Alexander Polyankin <alexander.polyankin@metabase.com>
Date: Fri, 16 Sep 2022 13:44:10 +0300
Subject: [PATCH] Update popper position when the filter changes (#25380)
---
.../metabase/modes/components/drill/ColumnFilterDrill.jsx | 3 ++-
.../components/filters/FilterPopover/FilterPopover.tsx | 4 +++-
.../visualizations/components/ChartClickActions.jsx | 8 +++++++-
3 files changed, 12 insertions(+), 3 deletions(-)
diff --git a/frontend/src/metabase/modes/components/drill/ColumnFilterDrill.jsx b/frontend/src/metabase/modes/components/drill/ColumnFilterDrill.jsx
index dd9a6b6c68b..d4cdaab797b 100644
--- a/frontend/src/metabase/modes/components/drill/ColumnFilterDrill.jsx
+++ b/frontend/src/metabase/modes/components/drill/ColumnFilterDrill.jsx
@@ -32,11 +32,12 @@ export default function ColumnFilterDrill({ question, clicked }) {
buttonType: "horizontal",
icon: "filter",
// eslint-disable-next-line react/display-name
- popover: ({ onChangeCardAndRun, onClose }) => (
+ popover: ({ onChangeCardAndRun, onResize, onClose }) => (
<FilterPopover
query={query}
filter={initialFilter}
onClose={onClose}
+ onResize={onResize}
onChangeFilter={filter => {
const nextCard = query.filter(filter).question().card();
onChangeCardAndRun({ nextCard });
diff --git a/frontend/src/metabase/query_builder/components/filters/FilterPopover/FilterPopover.tsx b/frontend/src/metabase/query_builder/components/filters/FilterPopover/FilterPopover.tsx
index 6cefa5687d3..83a2acb0db3 100644
--- a/frontend/src/metabase/query_builder/components/filters/FilterPopover/FilterPopover.tsx
+++ b/frontend/src/metabase/query_builder/components/filters/FilterPopover/FilterPopover.tsx
@@ -35,7 +35,7 @@ type Props = {
query: StructuredQuery;
onChange?: (filter: Filter) => void;
onChangeFilter: (filter: Filter) => void;
-
+ onResize?: () => void;
onClose?: () => void;
noCommitButton?: boolean;
@@ -70,6 +70,7 @@ export default function FilterPopover({
checkedColor,
onChange,
onChangeFilter,
+ onResize,
onClose,
}: Props) {
const [filter, setFilter] = useState(
@@ -148,6 +149,7 @@ export default function FilterPopover({
const handleFilterChange = (mbql: any[] = []) => {
const newFilter = filter ? filter.set(mbql) : new Filter(mbql, null, query);
setFilter(newFilter);
+ onResize?.();
};
if (editingFilter) {
diff --git a/frontend/src/metabase/visualizations/components/ChartClickActions.jsx b/frontend/src/metabase/visualizations/components/ChartClickActions.jsx
index 8bbd20ac338..cb7a0471d6e 100644
--- a/frontend/src/metabase/visualizations/components/ChartClickActions.jsx
+++ b/frontend/src/metabase/visualizations/components/ChartClickActions.jsx
@@ -145,6 +145,9 @@ class ChartClickActions extends Component {
const PopoverContent = popoverAction.popover;
popover = (
<PopoverContent
+ onResize={() => {
+ this.instance?.popperInstance?.update();
+ }}
onChangeCardAndRun={({ nextCard }) => {
if (popoverAction) {
MetabaseAnalytics.trackStructEvent(
@@ -204,6 +207,9 @@ class ChartClickActions extends Component {
<FlexTippyPopover
reference={popoverAnchor}
visible={!!popoverAnchor}
+ onShow={instance => {
+ this.instance = instance;
+ }}
onClose={() => {
MetabaseAnalytics.trackStructEvent(
"Action",
@@ -212,7 +218,7 @@ class ChartClickActions extends Component {
this.close();
}}
placement="bottom-start"
- offset={[-8, 8]}
+ offset={[0, 8]}
popperOptions={{
flip: true,
modifiers: [
--
GitLab