manage focus manually

Shopify · Mar 27, 2024 · c1b9dde · c1b9dde
1 parent c0d1f53
commit c1b9dde
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 44 deletions.
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
@@ -45,8 +45,6 @@ import {
   FooterHelp,
   Link,
   AlphaPicker,
-  Box,
-  Popover,
 } from '../src';
 import type {DropZoneProps, PageProps} from '../src';
 
@@ -644,7 +642,6 @@ export function DetailsPage() {
           </LegacyCard>
         </Layout.Section>
         <Layout.Section variant="oneThird">
-          <Box minHeight="75vmin" />
           <LegacyCard title="Organization">
             <LegacyCard.Section>
               <Select
@@ -680,14 +677,6 @@ export function DetailsPage() {
                   children: `Add ${query}`,
                 }}
               />
-              <button>yohooo</button>
-              <Popover
-                active
-                activator={<button>click me</button>}
-                onClose={() => {}}
-              >
-                <p>hello</p>
-              </Popover>
             </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
@@ -58,6 +58,7 @@ export function Picker({
   onClose,
   ...listboxProps
 }: PickerProps) {
+  const activatorRef = React.createRef<HTMLButtonElement>();
   const [query, setQuery] = useState<string>('');
   const [filteredOptions, setFilteredOptions] = useState<OptionProps[] | null>(
     options,
@@ -72,7 +73,8 @@ export function Picker({
   const handleClose = useCallback(() => {
     setPopoverActive(false);
     onClose?.();
-  }, [onClose]);
+    activatorRef.current?.focus();
+  }, [activatorRef, onClose]);
 
   const handleOpen = useCallback(() => {
     setPopoverActive(true);
@@ -175,11 +177,13 @@ export function Picker({
   return (
     <Popover
       active={popoverActive}
+      preventFocusOnClose
       activator={
         <Activator
           {...activator}
           onClick={handleOpen}
           placeholder={firstSelectedLabel}
+          ref={activatorRef}
         />
       }
       autofocusTarget="none"

diff --git a/polaris-react/src/components/Picker/components/Activator/Activator.tsx b/polaris-react/src/components/Picker/components/Activator/Activator.tsx
@@ -1,10 +1,9 @@
 import {SelectIcon} from '@shopify/polaris-icons';
-import React from 'react';
+import React, {forwardRef} from 'react';
 
 import {BlockStack} from '../../../BlockStack';
 import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
-import {UnstyledButton} from '../../../UnstyledButton';
 import {classNames} from '../../../../utilities/css';
 
 import styles from './Activator.module.css';
@@ -16,34 +15,34 @@ export interface ActivatorProps {
   onClick?(): void;
 }
 
-export function Activator({
-  disabled,
-  label,
-  placeholder,
-  onClick,
-}: ActivatorProps) {
-  return (
-    <UnstyledButton
-      className={classNames(styles.Activator, disabled && styles.disabled)}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      <BlockStack as="span" gap="100">
-        {label && (
-          <Text as="span" variant="bodySm" alignment="start" tone="subdued">
-            {label}
-          </Text>
-        )}
+export const Activator = forwardRef<HTMLButtonElement, ActivatorProps>(
+  ({disabled, label, placeholder, onClick}, ref) => {
+    return (
+      <button
+        className={classNames(styles.Activator, disabled && styles.disabled)}
+        disabled={disabled}
+        onClick={onClick}
+        ref={ref}
+      >
+        <BlockStack as="span" gap="100">
+          {label && (
+            <Text as="span" variant="bodySm" alignment="start" tone="subdued">
+              {label}
+            </Text>
+          )}
 
-        {placeholder && (
-          <Text as="span" variant="bodyMd" alignment="start">
-            {placeholder}
-          </Text>
-        )}
-      </BlockStack>
-      <span>
-        <Icon tone="subdued" source={SelectIcon} />
-      </span>
-    </UnstyledButton>
-  );
-}
+          {placeholder && (
+            <Text as="span" variant="bodyMd" alignment="start">
+              {placeholder}
+            </Text>
+          )}
+        </BlockStack>
+        <span>
+          <Icon tone="subdued" source={SelectIcon} />
+        </span>
+      </button>
+    );
+  },
+);
+
+Activator.displayName = 'Activator';