🐛

polaris-react/playground/DetailsPage.tsx

@@ -682,7 +682,7 @@ export function DetailsPage() {
               />
               {/* Used for reference */}
               <Select
-                label="Product type"
+                label="Product type (Old select for reference)"
                 options={options}
                 onChange={setSelected}
                 value={selected}

polaris-react/playground/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {SelectIcon} from '@shopify/polaris-icons';
 
 import {
@@ -26,7 +26,8 @@ export function Select({
 }: Props & {options?: {value?: string; label: string}[]}) {
   const [active, setActive] = React.useState(false);
   const [inputValue, setInputValue] = useState('');
-  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+  const [selectedOptions, setSelectedOptions] =
+    useState<string[]>(defaultSelected);
   const [options, setOptions] = useState(defaultOptions);
 
   const updateText = useCallback(
@@ -83,19 +84,23 @@ export function Select({
           <Listbox.Option
             key={`${value}`}
             value={value ?? ''}
-            selected={[...selectedOptions, ...defaultSelected].includes(
-              value ?? '',
-            )}
+            selected={selectedOptions.includes(value ?? '')}
             accessibilityLabel={label}
           >
             {label}
           </Listbox.Option>
         ))
       : null;
 
-  const firstSelected = defaultOptions?.find(
-    (option) => option.value === defaultSelected?.[0],
-  )?.label;
+  const firstSelected = useMemo(
+    () =>
+      defaultOptions?.find((option) =>
+        selectedOptions.length
+          ? option.value === selectedOptions?.[0]
+          : option.value === defaultSelected?.[0],
+      )?.label,
+    [defaultOptions, defaultSelected, selectedOptions],
+  );
 
   const activator = (
     <UnstyledButton
@@ -131,6 +136,7 @@ export function Select({
       <Combobox
         allowMultiple
         persistent
+        onClose={() => setActive(false)}
         activator={
           <Combobox.TextField
             onChange={updateText}

polaris-react/src/components/Combobox/Combobox.tsx

@@ -103,6 +103,7 @@ export function Combobox({
       activeOptionId,
       expanded: popoverActive,
       listboxId,
+      focused: persistent,
       setTextFieldFocused,
       setTextFieldLabelId,
       onTextFieldFocus: handleFocus,
@@ -113,6 +114,7 @@ export function Combobox({
       activeOptionId,
       popoverActive,
       listboxId,
+      persistent,
       setTextFieldFocused,
       setTextFieldLabelId,
       handleFocus,

polaris-react/src/utilities/combobox/context.tsx

@@ -26,6 +26,7 @@ export interface ComboboxListboxType {
   textFieldFocused?: boolean;
   // Unique ID to set on the listbox. Used to set the Combobox aria-owns and TextField aria-controls attributes.
   listboxId?: string;
+  focused?: boolean;
   // Whethor or not more options are available to lazy load. Use the hasMoreResults boolean provided by the GraphQL API of the paginated data. */
   willLoadMoreOptions?: boolean;
   // Sets the value for the TextField aria-activedescendant attribute.