[AlphaPicker] Add logic for multiple select (#11819)

### WHY are these changes introduced? Closes https://github.com/Shopify/polaris-internal/issues/1552 ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-ytdxymhwgj.chromatic.com/?path=/story/playground--details-page) ### 🎩 checklist - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
Shopify · Apr 2, 2024 · 35eb10c · 35eb10c
1 parent d0039a5
commit 35eb10c
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 59 deletions.
diff --git a/.changeset/wise-teachers-do.md b/.changeset/wise-teachers-do.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added multi select functionality to AlphaPicker
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
@@ -45,6 +45,7 @@ import {
   FooterHelp,
   Link,
   AlphaPicker,
+  BlockStack,
 } from '../src';
 import type {DropZoneProps, PageProps} from '../src';
 
@@ -56,10 +57,6 @@ export function DetailsPage() {
     nameFieldValue: 'Jaded Pixel',
   });
   const [query, setQuery] = useState('');
-  const [vendors, setVendors] = useState([
-    {value: 'The North Face', children: 'The North Face'},
-    {value: 'Patagonia', children: 'Patagonia'},
-  ]);
   const skipToContentRef = useRef<HTMLAnchorElement>(null);
   const [toastActive, setToastActive] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -85,16 +82,6 @@ export function DetailsPage() {
   const [supportSubject, setSupportSubject] = useState('');
   const [supportMessage, setSupportMessage] = useState('');
 
-  const handleSelect = (selected: string) => {
-    setQuery('');
-    if (vendors.some((vendor) => vendor.children === selected)) return;
-
-    setVendors((vendors) => [
-      ...vendors,
-      {value: selected, children: selected},
-    ]);
-  };
-
   const handleDiscard = useCallback(() => {
     setEmailFieldValue(defaultState.current.emailFieldValue);
     setNameFieldValue(defaultState.current.nameFieldValue);
@@ -644,32 +631,74 @@ export function DetailsPage() {
         <Layout.Section variant="oneThird">
           <LegacyCard title="Organization">
             <LegacyCard.Section>
-              <Select
-                label="Product type"
-                options={options}
-                onChange={setSelected}
-                value={selected}
-              />
-              <br />
-              <AlphaPicker
-                onSelect={handleSelect}
-                activator={{
-                  label: 'Vendor',
-                  placeholder: 'None selected',
-                }}
-                searchField={{
-                  label: 'Search vendors',
-                  placeholder: 'Search or add new vendor',
-                  autoComplete: 'off',
-                  value: query,
-                  onChange: (value) => setQuery(value),
-                }}
-                options={vendors}
-                addAction={{
-                  value: query,
-                  children: `Add ${query}`,
-                }}
-              />
+              <BlockStack gap="200">
+                <Select
+                  label="Product type"
+                  options={options}
+                  onChange={setSelected}
+                  value={selected}
+                />
+
+                <AlphaPicker
+                  allowMultiple
+                  activator={{
+                    label: 'Tags',
+                    placeholder: 'None selected',
+                  }}
+                  searchField={{
+                    label: 'Search tags',
+                    placeholder: 'Search or add new tags',
+                    autoComplete: 'off',
+                    value: query,
+                    onChange: (value) => setQuery(value),
+                  }}
+                  options={[
+                    {value: 'Outdoors', children: 'Outdoors'},
+                    {value: 'Adventure', children: 'Adventure'},
+                    {value: 'Hiking', children: 'Hiking'},
+                    {value: 'Camping', children: 'Camping'},
+                    {value: 'Backpacking', children: 'Backpacking'},
+                    {value: 'Mountaineering', children: 'Mountaineering'},
+                    {value: 'Skiing', children: 'Skiing'},
+                    {value: 'Snowboarding', children: 'Snowboarding'},
+                  ]}
+                  addAction={{
+                    value: query,
+                    children: `Add ${query}`,
+                  }}
+                />
+
+                <AlphaPicker
+                  activator={{
+                    label: 'Vendor',
+                    placeholder: 'None selected',
+                  }}
+                  searchField={{
+                    label: 'Search vendors',
+                    placeholder: 'Search or add new vendor',
+                    autoComplete: 'off',
+                    value: query,
+                    onChange: (value) => setQuery(value),
+                  }}
+                  options={[
+                    {value: 'The North Face', children: 'The North Face'},
+                    {value: 'Patagonia', children: 'Patagonia'},
+                    {value: 'Arc’teryx', children: 'Arc’teryx'},
+                    {value: 'Marmot', children: 'Marmot'},
+                    {value: 'Black Diamond', children: 'Black Diamond'},
+                    {value: 'Mountain Hardwear', children: 'Mountain Hardwear'},
+                    {value: 'Columbia', children: 'Columbia'},
+                    {value: 'Canada Goose', children: 'Canada Goose'},
+                    {value: 'Merrell', children: 'Merrell'},
+                    {value: 'Salomon', children: 'Salomon'},
+                    {value: 'Burton', children: 'Burton'},
+                  ]}
+                  addAction={{
+                    value: query,
+                    children: `Add ${query}`,
+                  }}
+                />
+              </BlockStack>
             </LegacyCard.Section>
             <LegacyCard.Section title="Collections" />
             <LegacyCard.Section title="Tags" />

diff --git a/polaris-react/src/components/Picker/Picker.tsx b/polaris-react/src/components/Picker/Picker.tsx
@@ -61,7 +61,7 @@ export function Picker({
   ...listboxProps
 }: PickerProps) {
   const activatorRef = React.createRef<HTMLButtonElement>();
-  const [activeItem, setActiveItem] = useState<string>();
+  const [activeItems, setActiveItems] = useState<string[]>([]);
   const [popoverActive, setPopoverActive] = useState(false);
   const [activeOptionId, setActiveOptionId] = useState<string>();
   const [textFieldLabelId, setTextFieldLabelId] = useState<string>();
@@ -164,14 +164,36 @@ export function Picker({
     [options],
   );
 
-  const firstSelectedOption = reactChildrenText(
-    options.find((option) => option.value === activeItem)?.children,
+  const handleSelect = useCallback(
+    (selected: string) => {
+      setQuery('');
+      updateText('');
+      listboxProps.onSelect?.(selected);
+
+      if (!allowMultiple) {
+        handleClose();
+        setActiveItems([selected]);
+        return;
+      }
+
+      setActiveItems((selectedOptions) => {
+        return activeItems.includes(selected)
+          ? selectedOptions.filter((option) => option !== selected)
+          : [...selectedOptions, selected];
+      });
+    },
+    [updateText, listboxProps, allowMultiple, activeItems, handleClose],
   );
 
-  const queryMatchesExistingOption = options.some((option) =>
-    QUERY_REGEX(query).exec(reactChildrenText(option.children)),
+  const firstSelectedOption = reactChildrenText(
+    options.find((option) => option.value === activeItems?.[0])?.children,
   );
 
+  const queryMatchesExistingOption = options.some((option) => {
+    const matcher = QUERY_REGEX(query);
+    return reactChildrenText(option.children).match(matcher);
+  });
+
   return (
     <Popover
       activator={
@@ -219,23 +241,11 @@ export function Picker({
             value={listboxOptionContextValue}
           >
             <Box paddingBlock="200">
-              <Listbox
-                {...listboxProps}
-                onSelect={(selected: string) => {
-                  setQuery('');
-                  updateText('');
-                  setActiveItem(selected);
-                  listboxProps.onSelect?.(selected);
-
-                  if (!allowMultiple) {
-                    handleClose();
-                  }
-                }}
-              >
+              <Listbox {...listboxProps} onSelect={handleSelect}>
                 {filteredOptions?.map((option) => (
                   <Listbox.Option
                     key={option.value}
-                    selected={option.value === activeItem}
+                    selected={activeItems.some((item) => item === option.value)}
                     {...option}
                   />
                 ))}