feat(MultiSelect): open dropdown when input receives focus

.changeset/multiselect-open-on-focus.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": minor
+---
+
+`MultiSelect` now opens its dropdown when the input receives focus, not only when the user types or clicks the arrow button.

easy-ui-react/src/MultiSelect/MultiSelect.test.tsx

@@ -29,6 +29,12 @@ describe("<MultiSelect />", () => {
     expect(screen.getByRole("listbox")).toBeInTheDocument();
   });
 
+  it("should open dropdown when focusing the input", async () => {
+    const { user } = render(getMultiSelect());
+    await userClick(user, screen.getByRole("combobox"));
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
   it("should filter dropdown with input interaction", async () => {
     const { user } = render(getMultiSelect());
     await user.type(screen.getByRole("combobox"), "ban");

easy-ui-react/src/MultiSelect/MultiSelect.tsx

@@ -250,6 +250,7 @@ export function MultiSelect<T extends Item>(props: MultiSelectProps<T>) {
       <div className={styles.comboBoxContainer}>
         <ComboBox
           className={styles.comboBox}
+          menuTrigger="focus"
           allowsEmptyCollection
           aria-label="Available items"
           selectedKey={tempSelectedKey}