[superset] branch master updated: chore: Scrolls top when opening a select filter (#15141)

[kgabryje]

This is an automated email from the ASF dual-hosted git repository.

kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new b3c1979  chore: Scrolls top when opening a select filter (#15141)
b3c1979 is described below

commit b3c197903c7dee18b76daedcf677bb034b1bbb12
Author: Michael S. Molina <70410625+michael-s-mol...@users.noreply.github.com>
AuthorDate: Tue Jun 15 05:10:23 2021 -0300

    chore: Scrolls top when opening a select filter (#15141)
---
 .../filters/components/Select/SelectFilterPlugin.tsx  | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git 
a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx 
b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 3051e3f..8b9b248 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -29,12 +29,20 @@ import {
   t,
   tn,
 } from '@superset-ui/core';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  RefObject,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { Select } from 'src/common/components';
 import debounce from 'lodash/debounce';
 import { SLOW_DEBOUNCE } from 'src/constants';
 import { useImmerReducer } from 'use-immer';
 import Icons from 'src/components/Icons';
+import { usePrevious } from 'src/common/hooks/usePrevious';
 import { PluginFilterSelectProps, SelectValue } from './types';
 import { StyledSelect, Styles } from '../common';
 import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
@@ -115,6 +123,7 @@ export default function PluginFilterSelect(props: 
PluginFilterSelectProps) {
     return [...firstData, ...restData];
   }, [col, selectedValues, data]);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const wasDropdownVisible = usePrevious(isDropdownVisible);
   const [currentSuggestionSearch, setCurrentSuggestionSearch] = useState('');
   const [dataMask, dispatchDataMask] = useImmerReducer(reducer, {
     extraFormData: {},
@@ -276,6 +285,14 @@ export default function PluginFilterSelect(props: 
PluginFilterSelectProps) {
         onSelect={clearSuggestionSearch}
         onBlur={handleBlur}
         onDropdownVisibleChange={setIsDropdownVisible}
+        dropdownRender={(
+          originNode: ReactElement & { ref?: RefObject<HTMLElement> },
+        ) => {
+          if (isDropdownVisible && !wasDropdownVisible) {
+            originNode.ref?.current?.scrollTo({ top: 0 });
+          }
+          return originNode;
+        }}
         onFocus={setFocusedFilter}
         // @ts-ignore
         onChange={handleChange}