Do not base autocomplete width on input size

Since react-aria 3.41.0, this would result in the listbox
disappearing when the user pressed "Down". It's not entirely clear
to me what specifically is causing this, but at this point it's not
worth it to invest more time into debugging it, when the default
width looks fine too.

Author: Vinnl

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/settings/SettingsPageRedesign.test.tsx

@@ -792,7 +792,7 @@ describe("Settings page redesign", () => {
       const input = screen.getByLabelText("City and state*");
       await act(async () => {
         await user.clear(input);
-        await user.keyboard("[Tab]Tu[ArrowDown][Enter][Tab]");
+        await user.keyboard("Tu[ArrowDown][Enter][Tab]");
       });
       expect(input).toHaveValue("Tulsa, OK, USA");
     });
@@ -814,7 +814,8 @@ describe("Settings page redesign", () => {
 
       const input = screen.getByLabelText("Past location");
       await act(async () => {
-        await user.keyboard("[Tab]Tu[ArrowDown][Enter][Tab]");
+        await user.click(input);
+        await user.keyboard("Tu[ArrowDown][Enter][Tab]");
       });
       expect(input).toHaveValue("Tulsa, OK, USA");
     });

src/app/components/client/ComboBox.tsx

@@ -91,13 +91,13 @@ function ComboBox(
           popoverRef={popoverRef}
           state={state}
           triggerRef={inputRef}
+          placement="bottom start"
         >
           <div className={comboBoxStyles.popoverList}>
             <ListBox
               {...listBoxProps}
               listBoxRef={listBoxRef}
               listPlaceholder={listPlaceholder}
-              parentRef={inputRef}
               state={state}
             />
           </div>

src/app/components/client/ListBox.tsx

@@ -7,7 +7,6 @@
 import { ReactElement, ReactNode, RefObject, useRef } from "react";
 import { AriaListBoxOptions, useListBox, useOption } from "react-aria";
 import { ListState } from "react-stately";
-import { useElementWidth } from "../../hooks/useElementWidth";
 import styles from "./ListBox.module.scss";
 
 export interface OptionProps extends AriaListBoxOptions<unknown> {
@@ -45,27 +44,21 @@ function Option({ item, state }: OptionProps) {
 export interface ListBoxProps extends AriaListBoxOptions<unknown> {
   state: ListState<object>;
   listBoxRef: RefObject<HTMLUListElement | null>;
-  parentRef?: RefObject<HTMLInputElement | null>;
   listPlaceholder?: ReactElement;
 }
 
 // TODO: Add unit test when changing this code:
 /* c8 ignore start */
 function ListBox(props: ListBoxProps) {
-  const { listBoxRef, parentRef, state, listPlaceholder } = props;
+  const { listBoxRef, state, listPlaceholder } = props;
   const { listBoxProps } = useListBox(props, state, listBoxRef);
 
-  const parentWidth = useElementWidth(parentRef);
-
   return (
     <ul
       {...listBoxProps}
       ref={listBoxRef}
       className={styles.listBox}
-      style={{
-        ...listBoxProps.style,
-        ...(parentWidth && { width: `${parentWidth}px` }),
-      }}
+      style={listBoxProps.style}
     >
       {[...state.collection].map((item) => (
         <Option key={item.key} item={item} state={state} />