[Picker] Fix empty state (#11915)

Shopify · Apr 19, 2024 · 828995c · 828995c
1 parent 3326581
commit 828995c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git a/.changeset/flat-berries-wink.md b/.changeset/flat-berries-wink.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed Picker empty state
diff --git a/polaris-react/src/components/Picker/Picker.tsx b/polaris-react/src/components/Picker/Picker.tsx
@@ -198,6 +198,7 @@ export function Picker({
  [updateText, listboxProps, allowMultiple, handleClose, activeItems],
  );
 
+ const showList = options.length > 0 || query !== '';
  const firstSelectedOption = reactChildrenText(
  options.find((option) => option.value === activeItems?.[0])?.children,
  );
@@ -232,6 +233,7 @@ export function Picker({
  paddingInline="200"
  borderBlockEndWidth="025"
  borderColor="border"
+ minHeight={showList ? undefined : '58px'}
  >
  <ComboboxTextFieldContext.Provider value={textFieldContextValue}>
  <SearchField
@@ -248,27 +250,30 @@ export function Picker({
  </ComboboxTextFieldContext.Provider>
  </Box>
  ) : null}
-
- <ComboboxListboxContext.Provider value={listboxContextValue}>
- <ComboboxListboxOptionContext.Provider
- value={listboxOptionContextValue}
- >
- <Box paddingBlock="200">
- <Listbox {...listboxProps} onSelect={handleSelect}>
- {filteredOptions.current?.map((option) => (
- <Listbox.Option
- key={option.value}
- selected={activeItems.some((item) => item === option.value)}
- {...option}
- />
- ))}
- {addAction && query !== '' && !queryMatchesExistingOption ? (
- <Listbox.Action {...addAction} value={query} />
- ) : null}
- </Listbox>
- </Box>
- </ComboboxListboxOptionContext.Provider>
- </ComboboxListboxContext.Provider>
+ {showList && (
+ <ComboboxListboxContext.Provider value={listboxContextValue}>
+ <ComboboxListboxOptionContext.Provider
+ value={listboxOptionContextValue}
+ >
+ <Box paddingBlock="200">
+ <Listbox {...listboxProps} onSelect={handleSelect}>
+ {filteredOptions.current?.map((option) => (
+ <Listbox.Option
+ key={option.value}
+ selected={activeItems.some(
+ (item) => item === option.value,
+ )}
+ {...option}
+ />
+ ))}
+ {addAction && query !== '' && !queryMatchesExistingOption ? (
+ <Listbox.Action {...addAction} value={query} />
+ ) : null}
+ </Listbox>
+ </Box>
+ </ComboboxListboxOptionContext.Provider>
+ </ComboboxListboxContext.Provider>
+ )}
  </Popover.Pane>
  </Popover>
  );