fix examples and input focus

Author: rivka-ungar

packages/core/src/components/next/Dropdown/components/Trigger/DropdownInput.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import cx from "classnames";
 import { BaseInput } from "../../../../BaseInput";
 import styles from "./Trigger.module.scss";
@@ -26,8 +26,8 @@ const DropdownInput = ({ inputSize }: { inputSize?: "small" | "medium" | "large"
     getInputProps
   } = useDropdownContext<BaseListItemData>();
 
+  const inputRef = useRef<HTMLInputElement>(null);
   const hasSelection = multi ? selectedItems.length > 0 : !!selectedItem;
-
   const multipleSelectionDropdownProps = getDropdownProps ? getDropdownProps({ preventKeyAction: isOpen }) : {};
 
   return (
@@ -40,6 +40,7 @@ const DropdownInput = ({ inputSize }: { inputSize?: "small" | "medium" | "large"
             placeholder: hasSelection ? "" : placeholder,
             ...multipleSelectionDropdownProps
           })}
+          ref={inputRef}
           inputRole="combobox"
           value={inputValue || ""}
           autoFocus={autoFocus}

packages/docs/src/pages/components/Dropdown/DropdownBasicDropdown.stories.tsx

@@ -397,12 +397,7 @@ export const DropdownWithGroups: Story = {
         <Flex direction="column" gap="medium">
           <Text>Group by category</Text>
           <div style={{ width: "300px" }}>
-            <Dropdown
-              placeholder="Group by category"
-              options={options}
-              maxMenuHeight={170}
-              clearAriaLabel="Clear"
-            />
+            <Dropdown placeholder="Group by category" options={options} maxMenuHeight={170} clearAriaLabel="Clear" />
           </div>
         </Flex>
         <Flex direction="column" gap="medium">
@@ -665,5 +660,3 @@ export const DropdownWithVirtualization: Story = {
   },
   name: "Virtualized Dropdown"
 };
-
-

packages/docs/src/pages/components/Dropdown/DropdownBoxMode.mdx

@@ -58,14 +58,6 @@ The box mode supports multi select option that display as chips. The selected it
 
 <Canvas of={DropdownBoxModeStories.WithIcons} />
 
-## Use cases and examples
-
-### People picker
-
-Can be used when there is a need for selecting people to assign a column
-
-<Canvas of={DropdownBoxModeStories.PeoplePicker} />
-
 ## Do's and don'ts
 
 <ComponentRules
@@ -92,6 +84,8 @@ Can be used when there is a need for selecting people to assign a column
                 type="text"
                 placeholder="Search menu"
                 style={{ width: "100%", padding: "8px", border: "1px solid #ddd", borderRadius: "4px" }}
+                autoFocus={false}
+                tabIndex={-1}
               />
               <div style={{ marginTop: "8px" }}>Category 1</div>
               <div>Option 1</div>
@@ -105,7 +99,14 @@ Can be used when there is a need for selecting people to assign a column
   ]}
 />
 
+## Use cases and examples
+
+### People picker
+
+Can be used when there is a need for selecting people to assign a column
+
+<Canvas of={DropdownBoxModeStories.PeoplePicker} />
+
 ## Related components
 
 <RelatedComponents componentsNames={["DropdownBasicSelect", "Combobox", "Menu"]} />
-

packages/docs/src/pages/components/Dropdown/DropdownBoxMode.stories.tsx

@@ -261,48 +261,18 @@ export const WithIcons: Story = {
 export const PeoplePicker: Story = {
   render: () => {
     const peopleOptions: any = useMemo(
-      () => [
-        {
-          value: "Matt",
-          label: "Matt Gaman",
-          startElement: {
-            type: "avatar",
-            value: person1
-          }
-        },
-        {
-          value: "Jennifer",
-          label: "Jennifer Lawrence",
-          startElement: {
-            type: "avatar",
-            value: person2
-          }
-        },
-        {
-          value: "Emma",
-          label: "Emma Stone",
-          startElement: {
-            type: "avatar",
-            value: person3
-          }
-        },
-        {
-          value: "Johnny",
-          label: "Johnny Depp",
-          startElement: {
-            type: "avatar",
-            value: person4
-          }
-        }
-      ],
-      []
-    );
-
-    const suggestedPeople: any = useMemo(
       () => [
         {
           label: "Suggested people",
           options: [
+            {
+              value: "Matt",
+              label: "Matt Gaman",
+              startElement: {
+                type: "avatar",
+                value: person1
+              }
+            },
             {
               value: "Jennifer",
               label: "Jennifer Lawrence",
@@ -311,6 +281,14 @@ export const PeoplePicker: Story = {
                 value: person2
               }
             },
+            {
+              value: "Emma",
+              label: "Emma Stone",
+              startElement: {
+                type: "avatar",
+                value: person3
+              }
+            },
             {
               value: "Johnny",
               label: "Johnny Depp",