diff --git a/.changeset/flat-berries-wink.md b/.changeset/flat-berries-wink.md new file mode 100644 index 00000000000..596ea40be30 --- /dev/null +++ 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 index d447ecd400c..d834a894899 100644 --- 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'} > ) : null} - - - - - - {filteredOptions.current?.map((option) => ( - item === option.value)} - {...option} - /> - ))} - {addAction && query !== '' && !queryMatchesExistingOption ? ( - - ) : null} - - - - + {showList && ( + + + + + {filteredOptions.current?.map((option) => ( + item === option.value, + )} + {...option} + /> + ))} + {addAction && query !== '' && !queryMatchesExistingOption ? ( + + ) : null} + + + + + )} );