Add tests for losing focus in a combobox

Unfortunately this wouldn't have detected the bug that I fixed in
my previous commits, since those were related to adding an event
listener to viewport size changes (which is mocked in tests), but
having these shouldn't do any harm.

Author: Vinnl

src/app/components/client/ComboBox.test.tsx

@@ -45,6 +45,20 @@ it("shows suggestions when typing", async () => {
   expect(suggestions).toBeInTheDocument();
 });
 
+it("does not lose focus while typing", async () => {
+  const user = userEvent.setup();
+  const ComposedTextComboBox = composeStory(TextComboBoxRequired, Meta);
+  render(<ComposedTextComboBox />);
+
+  const comboBox = screen.getByRole("combobox");
+  await user.click(comboBox);
+  expect(comboBox).toHaveFocus();
+  await user.keyboard("T");
+  expect(comboBox).toHaveFocus();
+  await user.keyboard("u");
+  expect(comboBox).toHaveFocus();
+});
+
 it("hides suggestions when clearing the input field", async () => {
   const user = userEvent.setup();
   const ComposedTextComboBox = composeStory(TextComboBoxRequired, Meta);

src/app/components/client/LocationAutocompleteInput.test.tsx

@@ -34,3 +34,22 @@ it("suggests locations after typing", async () => {
   expect(suggestions[1]).toHaveTextContent("Tucson AZ, USA");
   expect(inputField).toHaveValue("Tu");
 });
+
+it("does not lose focus while typing", async () => {
+  const user = userEvent.setup();
+  const LocationAutocompleteInput = composeStory(
+    LocationAutocompleteInputStory,
+    Meta,
+  );
+  render(<LocationAutocompleteInput />);
+
+  expect(screen.queryByRole("listbox")).toBeNull();
+
+  const inputField = screen.getByLabelText("Location (demo)");
+  await user.click(inputField);
+  expect(inputField).toHaveFocus();
+  await user.keyboard("T");
+  expect(inputField).toHaveFocus();
+  await user.keyboard("u");
+  expect(inputField).toHaveFocus();
+});

src/app/components/client/Popover.tsx

@@ -33,7 +33,7 @@ function Popover({ children, offset, state, ...props }: PopoverProps) {
     <Overlay>
       {/* FocusScope is a utility component that traps keyboard focus within its child elements.
       When used in a dialog, it ensures that focus never leaves the dialog until it’s closed. */}
-      {/* We've disabled autoFocus so the popover doesn’t steal or re-trap focus 
+      {/* We've disabled autoFocus so the popover doesn’t steal or re-trap focus
       For more details see MNTOR-4523 */}
       <FocusScope contain restoreFocus autoFocus={false}>
         <div {...underlayProps} className={styles.underlay} />

src/app/components/client/stories/ComboBox.stories.tsx

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import type { Meta, StoryObj } from "@storybook/nextjs";
+import { useArgs } from "storybook/preview-api";
 
 import { ComboBox } from "../ComboBox";
 import { Item } from "react-stately";
@@ -22,6 +23,17 @@ const items: Array<ItemObject> = [
 const meta: Meta<typeof ComboBox> = {
   title: "Design Systems/Atoms/ComboBox",
   component: ComboBox,
+  render: (args) => {
+    const [{ inputValue }, updateArgs] = useArgs();
+
+    return (
+      <ComboBox
+        {...args}
+        inputValue={inputValue}
+        onInputChange={(newValue) => updateArgs({ inputValue: newValue })}
+      />
+    );
+  },
 };
 export default meta;
 type Story = StoryObj<typeof ComboBox>;