(superset) branch msyavuz/feat/select-deselect-all updated: fix: only work when options are preset, seperate debounce and search

[msyavuz]

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

msyavuz pushed a commit to branch msyavuz/feat/select-deselect-all
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to 
refs/heads/msyavuz/feat/select-deselect-all by this push:
     new b9bdac4178 fix: only work when options are preset, seperate debounce 
and search
b9bdac4178 is described below

commit b9bdac41783c92be67c4ae01d035256df1ababdb
Author: Mehmet Salih Yavuz <salih.ya...@proton.me>
AuthorDate: Wed Apr 9 10:55:46 2025 +0300

    fix: only work when options are preset, seperate debounce and search
---
 superset-frontend/src/components/Select/Select.tsx | 63 ++++++++++++----------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/superset-frontend/src/components/Select/Select.tsx 
b/superset-frontend/src/components/Select/Select.tsx
index e9775981fd..1d97d41948 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -33,6 +33,7 @@ import {
   ensureIsArray,
   formatNumber,
   NumberFormats,
+  SupersetTheme,
   t,
   usePrevious,
 } from '@superset-ui/core';
@@ -344,14 +345,12 @@ const Select = forwardRef(
       onDeselect?.(value, option);
     };
 
-    const handleOnSearch = debounce((search: string) => {
-      const searchValue = search.trim();
-      setIsSearching(!!searchValue);
+    const handleDebounceSearch = debounce((search: string) => {
       if (allowNewOptions) {
-        const newOption = searchValue &&
-          !hasOption(searchValue, fullSelectOptions, true) && {
-            label: searchValue,
-            value: searchValue,
+        const newOption = search &&
+          !hasOption(search, fullSelectOptions, true) && {
+            label: search,
+            value: search,
             isNewOption: true,
           };
         const cleanSelectOptions = ensureIsArray(fullSelectOptions).filter(
@@ -362,20 +361,31 @@ const Select = forwardRef(
           : cleanSelectOptions;
         setSelectOptions(newOptions);
       }
-      const filteredOptions = fullSelectOptions.filter(option =>
-        handleFilterOptionHelper(
-          search,
-          option as AntdLabeledValue,
-          ['label', 'value'],
-          true,
-        ),
-      );
-      setVisibleOptions(filteredOptions);
-      setInputValue(searchValue);
-      onSearch?.(searchValue);
+      setInputValue(search);
+      onSearch?.(search);
     }, FAST_DEBOUNCE);
 
-    useEffect(() => () => handleOnSearch.cancel(), [handleOnSearch]);
+    const handleOnSearch = useCallback(
+      (search: string) => {
+        const searchValue = search.trim();
+        setIsSearching(!!searchValue);
+
+        handleDebounceSearch(searchValue);
+
+        const filteredOptions = fullSelectOptions.filter(option =>
+          handleFilterOptionHelper(
+            search,
+            option as AntdLabeledValue,
+            ['label', 'value'],
+            true,
+          ),
+        );
+        setVisibleOptions(filteredOptions);
+      },
+      [fullSelectOptions],
+    );
+
+    useEffect(() => () => handleDebounceSearch.cancel(), [handleOnSearch]);
 
     const handleFilterOption = (search: string, option: AntdLabeledValue) =>
       handleFilterOptionHelper(search, option, optionFilterProps, 
filterOption);
@@ -389,6 +399,7 @@ const Select = forwardRef(
         if (!isEqual(initialOptionsSorted, selectOptions)) {
           setSelectOptions(initialOptionsSorted);
         }
+        setIsSearching(false);
         setVisibleOptions(fullSelectOptions);
       }
       if (onDropdownVisibleChange) {
@@ -456,18 +467,14 @@ const Select = forwardRef(
       fireOnChange,
     ]);
 
-    useEffect(() => {
-      console.log({ visibleOptions });
-    }, [visibleOptions]);
-
     const bulkSelectComponent = useMemo(
       () => (
         <Space
-          css={css`
+          css={(theme: SupersetTheme) => css`
             display: flex;
-            justify-content: space-around;
-            margin-bottom: 4px;
-            width: 90%;
+            justify-content: center;
+            align-items: center;
+            padding-bottom: ${theme.gridUnit * 2}px;
           `}
         >
           <Button
@@ -503,7 +510,7 @@ const Select = forwardRef(
         fullSelectOptions.length,
         helperText,
         undefined,
-        isSearching ? bulkSelectComponent : undefined,
+        isSearching && !allowNewOptions ? bulkSelectComponent : undefined,
       );
 
     const handleClear = () => {