Fixes

metabase · Feb 22, 2024 · 20b23f1 · 20b23f1
1 parent 0cb44c1
commit 20b23f1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 20 deletions.
diff --git a/...rc/metabase/querying/components/FilterValuePicker/SearchValuePicker/SearchValuePicker.tsx b/...rc/metabase/querying/components/FilterValuePicker/SearchValuePicker/SearchValuePicker.tsx
@@ -5,7 +5,7 @@ import type { FieldId, FieldValue } from "metabase-types/api";
 import { MultiSelect } from "metabase/ui";
 import { getEffectiveOptions } from "../utils";
 import { SEARCH_DEBOUNCE } from "./constants";
-import { shouldSearch, getSearchValues } from "./utils";
+import { shouldSearch, getSearchValues, getOptimisticOptions } from "./utils";
 
 interface SearchValuePickerProps {
   fieldId: FieldId;
@@ -54,35 +54,19 @@ export function SearchValuePicker({
     }
   };
 
-  const handleCreate = (searchValue: string) => {
-    onChange([...selectedValues, searchValue]);
-    return searchValue;
-  };
-
-  const shouldCreate = (searchValue: string) => {
-    return (
-      canAddValue(searchValue) &&
-      !options.some(option => option.label === searchValue)
-    );
-  };
-
   useDebounce(handleSearchTimeout, SEARCH_DEBOUNCE, [searchValue]);
 
   return (
     <MultiSelect
-      data={options}
+      data={getOptimisticOptions(options, searchValue, canAddValue)}
       value={selectedValues}
       searchValue={searchValue}
       placeholder={placeholder}
-      shouldCreate={shouldCreate}
-      getCreateLabel={searchValue => searchValue}
-      creatable
       searchable
       autoFocus={autoFocus}
       aria-label={t`Filter value`}
       onChange={onChange}
       onSearchChange={handleSearchChange}
-      onCreate={handleCreate}
     />
   );
 }
diff --git a/frontend/src/metabase/querying/components/FilterValuePicker/SearchValuePicker/utils.ts b/frontend/src/metabase/querying/components/FilterValuePicker/SearchValuePicker/utils.ts
@@ -1,4 +1,5 @@
 import { MetabaseApi } from "metabase/services";
+import type { SelectItem } from "metabase/ui";
 import type { FieldId, FieldValue } from "metabase-types/api";
 import { SEARCH_LIMIT } from "./constants";
 
@@ -30,3 +31,16 @@ export function shouldSearch(
 
   return !isExtensionOfLastSearch || hasMoreValues;
 }
+
+export function getOptimisticOptions(
+  options: SelectItem[],
+  searchValue: string,
+  canAddValue: (query: string) => boolean,
+) {
+  const isValid = canAddValue(searchValue);
+  const isExisting = options.some(({ label }) => label === searchValue);
+
+  return isValid && !isExisting
+    ? [{ value: searchValue, label: searchValue }, ...options]
+    : options;
+}
diff --git a/...rc/metabase/querying/components/FilterValuePicker/StaticValuePicker/StaticValuePicker.tsx b/...rc/metabase/querying/components/FilterValuePicker/StaticValuePicker/StaticValuePicker.tsx
@@ -48,8 +48,8 @@ export function StaticValuePicker({
   const handleSearchChange = (newSearchValue: string) => {
     setSearchValue(newSearchValue);
 
-    const canAdd = canAddValue(newSearchValue);
-    if (canAdd) {
+    const isValid = canAddValue(newSearchValue);
+    if (isValid) {
       onChange?.([...lastValues, newSearchValue]);
     } else {
       onChange?.(lastValues);