From db64b453431f7d1ef041fa678ece392b9a985446 Mon Sep 17 00:00:00 2001
From: flamber <1447303+flamber@users.noreply.github.com>
Date: Wed, 24 Jun 2020 00:13:43 +0200
Subject: [PATCH] Fix selector scroll jankyness (#12756)
---
frontend/src/metabase/components/AccordionList.jsx | 2 +-
.../metabase/query_builder/components/DataSelector.jsx | 8 ++++++--
.../metabase/query_builder/components/DimensionList.jsx | 2 +-
.../query_builder/components/filters/FilterPopover.jsx | 7 +++++--
4 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/frontend/src/metabase/components/AccordionList.jsx b/frontend/src/metabase/components/AccordionList.jsx
index 865b353872d..e375f401b09 100644
--- a/frontend/src/metabase/components/AccordionList.jsx
+++ b/frontend/src/metabase/components/AccordionList.jsx
@@ -382,7 +382,7 @@ export default class AccordionList extends Component {
const defaultListStyle = {
// HACK - Ensure the component can scroll
// This is a temporary fix to handle cases where the parent component doesn’t pass in the correct `maxHeight`
- overflowY: "scroll",
+ overflowY: "auto",
};
return (
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector.jsx
index 04a7cb0656d..7e9a61409e6 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector.jsx
@@ -859,12 +859,14 @@ const TablePicker = ({
},
];
return (
- <div>
+ <div style={{ width: 300, overflowY: "auto" }}>
<AccordionList
id="TablePicker"
key="tablePicker"
className="text-brand"
sections={sections}
+ maxHeight={Infinity}
+ width={"100%"}
searchable
onChange={item => onChangeTable(item.table)}
itemIsSelected={item =>
@@ -951,12 +953,14 @@ class FieldPicker extends Component {
];
return (
- <div style={{ width: 300 }}>
+ <div style={{ width: 300, overflowY: "auto" }}>
<AccordionList
id="FieldPicker"
key="fieldPicker"
className="text-brand"
sections={sections}
+ maxHeight={Infinity}
+ width={"100%"}
searchable
onChange={item => onChangeField(item.field)}
itemIsSelected={item =>
diff --git a/frontend/src/metabase/query_builder/components/DimensionList.jsx b/frontend/src/metabase/query_builder/components/DimensionList.jsx
index fdea030a424..104e3211cc3 100644
--- a/frontend/src/metabase/query_builder/components/DimensionList.jsx
+++ b/frontend/src/metabase/query_builder/components/DimensionList.jsx
@@ -22,7 +22,7 @@ export type AccordionListSection = {
type Props = {
className?: string,
maxHeight?: number,
- width?: ?number,
+ width?: ?number | ?string,
dimension?: ?Dimension,
dimensions?: Dimension[],
diff --git a/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx b/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx
index 6eaf4da846a..e32825e8494 100644
--- a/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx
+++ b/frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx
@@ -154,7 +154,10 @@ export default class ViewFilterPopover extends Component {
const dimension = filter && filter.dimension();
if (choosingField || !dimension) {
return (
- <div className={className} style={{ minWidth: MIN_WIDTH, ...style }}>
+ <div
+ className={className}
+ style={{ minWidth: MIN_WIDTH, overflowY: "auto", ...style }}
+ >
{fieldPickerTitle && (
<SidebarHeader className="mx1 my2" title={fieldPickerTitle} />
)}
@@ -177,7 +180,7 @@ export default class ViewFilterPopover extends Component {
// special case for segments
this.handleCommitFilter(item.filter, item.query);
}}
- width={isSidebar ? null : MIN_WIDTH}
+ width={isSidebar ? null : "100%"}
alwaysExpanded={isTopLevel || isSidebar}
/>
{showCustom && (
--
GitLab