[combobox] fix storybook exports + add test for simulated changes

package.json

@@ -36,12 +36,12 @@
     "@preconstruct/cli": "^2.1.0",
     "@reach/router": "^1.3.4",
     "@react-spring/web": "^9.2.3",
-    "@storybook/addon-actions": "^6.3.1",
-    "@storybook/addon-docs": "^6.3.1",
-    "@storybook/addon-links": "^6.3.1",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-docs": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.3.1",
-    "@storybook/react": "^6.3.1",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/react": "^6.3.12",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",

packages/combobox/__tests__/combobox.test.tsx

@@ -14,7 +14,7 @@ import cities from "../examples/cities";
 
 describe("<Combobox />", () => {
   describe("rendering", () => {
-    it("renders as any HTML element", async () => {
+    it("renders as any HTML element", () => {
       function MyCombobox() {
         let [term, setTerm] = React.useState("");
         let results = useCityMatch(term);
@@ -45,18 +45,18 @@ describe("<Combobox />", () => {
         );
       }
 
-      let { getByTestId, getAllByRole } = render(<MyCombobox />);
+      let { getByTestId, getByRole, getAllByRole } = render(<MyCombobox />);
       expect(getByTestId("box").tagName).toBe("SPAN");
-      expect(getByTestId("input").tagName).toBe("TEXTAREA");
+      expect(getByRole("combobox").tagName).toBe("TEXTAREA");
 
       // Type to show the list
-      await userEvent.type(getByTestId("input"), "e");
+      userEvent.type(getByRole("combobox"), "e");
 
-      expect(getByTestId("list").tagName).toBe("DIV");
+      expect(getByRole("listbox").tagName).toBe("DIV");
       expect(getAllByRole("option")[0].tagName).toBe("DIV");
     });
 
-    it("renders when using the useComboboxContext hook", async () => {
+    it("renders when using the useComboboxContext hook", () => {
       function CustomComboboxInput(props: ComboboxInputProps) {
         const { isExpanded } = useComboboxContext();
         return (
@@ -85,14 +85,14 @@ describe("<Combobox />", () => {
         );
       }
 
-      let { getByTestId, getAllByRole } = render(<MyCombobox />);
+      let { getByRole, getAllByRole } = render(<MyCombobox />);
 
       // Type to show the list
 
-      await userEvent.type(getByTestId("input"), "a");
+      userEvent.type(getByRole("combobox"), "a");
       //jest.advanceTimersByTime(100);
 
-      expect(getByTestId("list")).toBeTruthy();
+      expect(getByRole("listbox")).toBeTruthy();
       expect(getAllByRole("option")[0]).toBeTruthy();
     });
   });
@@ -195,17 +195,44 @@ describe("<Combobox />", () => {
   });
 
   describe("user events", () => {
-    it("should open a list on text entry", async () => {
+    it("should open a list on text entry", () => {
       let optionToSelect = "Eagle Pass, Texas";
-      let { getByTestId, getByText } = render(<BasicCombobox />);
+      let { getByRole, getByText } = render(<BasicCombobox />);
       let getByTextWithMarkup = withMarkup(getByText);
-      let input = getByTestId("input");
+      let input = getByRole("combobox");
 
-      await userEvent.type(input, "e");
+      userEvent.type(input, "e");
 
-      expect(getByTestId("list")).toBeInTheDocument();
+      expect(getByRole("listbox")).toBeInTheDocument();
       expect(getByTextWithMarkup(optionToSelect)).toBeInTheDocument();
     });
+
+    it("should *not* open a list when input value changes without text entry", () => {
+      let optionToSelect = "Eagle Pass, Texas";
+
+      function EaglePassSelector() {
+        let [term, setTerm] = React.useState("");
+        return (
+          <div>
+            <button
+              type="button"
+              onClick={() => {
+                setTerm(optionToSelect);
+              }}
+            >
+              Select Eagle Pass
+            </button>
+            <ControlledCombobox term={term} setTerm={setTerm} />
+          </div>
+        );
+      }
+
+      let { getByRole, queryByRole } = render(<EaglePassSelector />);
+
+      let button = getByRole("button");
+      userEvent.click(button);
+      expect(queryByRole("listbox")).toBeFalsy();
+    });
   });
 });
 
@@ -214,9 +241,9 @@ function BasicCombobox() {
   let [term, setTerm] = React.useState("");
   let results = useCityMatch(term);
 
-  const handleChange = (event: any) => {
+  function handleChange(event: any) {
     setTerm(event.target.value);
-  };
+  }
 
   return (
     <div>
@@ -250,6 +277,55 @@ function BasicCombobox() {
   );
 }
 
+function ControlledCombobox({
+  term,
+  setTerm,
+}: {
+  term: string;
+  setTerm:
+    | ((term: string) => void)
+    | ((setter: (prevTerm: string) => string) => void);
+}) {
+  let results = useCityMatch(term);
+
+  function handleChange(event: any) {
+    setTerm(event.target.value);
+  }
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <Combobox id="holy-smokes">
+        <ComboboxInput
+          aria-label="cool search"
+          data-testid="input"
+          name="awesome"
+          onChange={handleChange}
+          value={term}
+        />
+        {results ? (
+          <ComboboxPopover portal={false}>
+            {results.length === 0 ? (
+              <p>No results</p>
+            ) : (
+              <ComboboxList data-testid="list">
+                {results.slice(0, 10).map((result, index) => (
+                  <ComboboxOption
+                    key={index}
+                    value={`${result.city}, ${result.state}`}
+                  />
+                ))}
+              </ComboboxList>
+            )}
+          </ComboboxPopover>
+        ) : (
+          <span>No Results!</span>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
 function useCityMatch(term: string) {
   return term.trim() === ""
     ? null

packages/combobox/examples/index.story.js

@@ -1,13 +1,14 @@
-export { Example as BasicTsTS } from "./basic-ts.example.tsx";
+export { Example as BasicTs } from "./basic-ts.example.tsx";
 export { Example as Basic } from "./basic.example.js";
-export { Example as ControlledTsTS } from "./controlled-ts.example.tsx";
+export { Example as ControlledTs } from "./controlled-ts.example.tsx";
 export { Example as Controlled } from "./controlled.example.js";
 export { Example as LotsOfElements } from "./lots-of-elements.example.js";
 export { Example as NoPopover } from "./no-popover.example.js";
 export { Example as OpenOnFocus } from "./open-on-focus.example.js";
+export { Example as SimulatedChange } from "./simulated-change.example.js";
 export { Example as TokenInput } from "./token-input.example.js";
 export { Example as WithButton } from "./with-button.example.js";
-export { Example as WithCustomSelectDataTS } from "./with-custom-select-data.example.tsx";
+export { Example as WithCustomSelectDataTs } from "./with-custom-select-data.example.tsx";
 export { Example as WithUsecomboboxcontextHookTS } from "./with-usecomboboxcontext-hook.example.tsx";
 
 export default {

packages/combobox/examples/simulated-change.example.js

@@ -86,6 +86,5 @@ function Example() {
   );
 }
 
-Example.story = { name };
-export const Comp = Example;
-export default { title: "Combobox" };
+Example.storyName = name;
+export { Example };