refactor(Autocomplete)!: use Option component to define autocomplete options (#1726)

mfal · web-flow · commit 9488e41d778d · 2025-07-11T09:39:24.000+02:00
diff --git a/apps/docs/src/content/03-components/form-controls/autocomplete/examples/default.tsx b/apps/docs/src/content/03-components/form-controls/autocomplete/examples/default.tsx
@@ -1,8 +1,7 @@
 import {
-  ContextMenu,
+  Option,
   Label,
   TextField,
-  MenuItem,
   Autocomplete,
 } from "@mittwald/flow-react-components";
 import { useState } from "react";
@@ -19,9 +18,9 @@ export default () => {
     ].map((d) => {
       const email = `${input.split("@")[0]}@${d}`;
       return (
-        <MenuItem key={email} id={email} textValue={email}>
+        <Option key={email} value={email} textValue={email}>
           {email}
-        </MenuItem>
+        </Option>
       );
     });
   };
@@ -31,7 +30,7 @@ export default () => {
       <TextField value={input} onChange={setInput}>
         <Label>Email</Label>
       </TextField>
-      <ContextMenu>{generateSuggestItems()}</ContextMenu>
+      {generateSuggestItems()}
     </Autocomplete>
   );
 };
diff --git a/apps/docs/src/content/03-components/form-controls/autocomplete/examples/filter.tsx b/apps/docs/src/content/03-components/form-controls/autocomplete/examples/filter.tsx
@@ -1,8 +1,7 @@
 import {
-  ContextMenu,
+  Option,
   Label,
   TextField,
-  MenuItem,
   Autocomplete,
 } from "@mittwald/flow-react-components";
 import { useState } from "react";
@@ -19,9 +18,9 @@ export default () => {
     ].map((d) => {
       const email = `${input.split("@")[0]}@${d}`;
       return (
-        <MenuItem key={email} id={email} textValue={email}>
+        <Option key={email} value={email} textValue={email}>
           {email}
-        </MenuItem>
+        </Option>
       );
     });
   };
@@ -38,7 +37,7 @@ export default () => {
       <TextField value={input} onChange={setInput}>
         <Label>Email</Label>
       </TextField>
-      <ContextMenu>{generateSuggestItems()}</ContextMenu>
+      {generateSuggestItems()}
     </Autocomplete>
   );
 };
diff --git a/apps/docs/src/content/03-components/form-controls/autocomplete/examples/form.tsx b/apps/docs/src/content/03-components/form-controls/autocomplete/examples/form.tsx
@@ -4,8 +4,7 @@ import {
   Autocomplete,
   Section,
   TextField,
-  ContextMenu,
-  MenuItem,
+  Option,
 } from "@mittwald/flow-react-components";
 import { useForm } from "react-hook-form";
 import {
@@ -32,9 +31,9 @@ export default () => {
     ].map((d) => {
       const email = `${currentEmailValue.split("@")[0]}@${d}`;
       return (
-        <MenuItem key={email} id={email} textValue={email}>
+        <Option key={email} value={email} textValue={email}>
           {email}
-        </MenuItem>
+        </Option>
       );
     });
   };
@@ -52,9 +51,7 @@ export default () => {
             <TextField>
               <Label>Test</Label>
             </TextField>
-            <ContextMenu>
-              {generateSuggestItems()}
-            </ContextMenu>
+            {generateSuggestItems()}
           </Autocomplete>
         </Field>
         <Button type="submit">Speichern</Button>
diff --git a/apps/docs/src/content/03-components/form-controls/autocomplete/examples/search.tsx b/apps/docs/src/content/03-components/form-controls/autocomplete/examples/search.tsx
@@ -1,9 +1,8 @@
 import {
-  ContextMenu,
   Label,
-  MenuItem,
   Autocomplete,
   SearchField,
+  Option,
 } from "@mittwald/flow-react-components";
 import { useState } from "react";
 
@@ -19,9 +18,9 @@ export default () => {
     ].map((d) => {
       const email = `${input.split("@")[0]}@${d}`;
       return (
-        <MenuItem key={email} id={email} textValue={email}>
+        <Option key={email} value={email} textValue={email}>
           {email}
-        </MenuItem>
+        </Option>
       );
     });
   };
@@ -31,7 +30,7 @@ export default () => {
       <SearchField value={input} onChange={setInput}>
         <Label>Email</Label>
       </SearchField>
-      <ContextMenu>{generateSuggestItems()}</ContextMenu>
+      {generateSuggestItems()}
     </Autocomplete>
   );
 };
diff --git a/apps/remote-dom-demo/src/app/remote/react-hook-form/page.tsx b/apps/remote-dom-demo/src/app/remote/react-hook-form/page.tsx
@@ -13,8 +13,6 @@ import {
   TextField,
   PasswordCreationField,
   Autocomplete,
-  ContextMenu,
-  MenuItem,
 } from "@mittwald/flow-remote-react-components";
 import {
   Form,
@@ -62,14 +60,12 @@ export default function Page() {
             <TextField>
               <Label>Email</Label>
             </TextField>
-            <ContextMenu>
-              <MenuItem textValue="Foo" id="Foo">
-                Foo
-              </MenuItem>
-              <MenuItem textValue="Bar" id="Bar">
-                Bar
-              </MenuItem>
-            </ContextMenu>
+            <Option textValue="Foo" value="Foo">
+              Foo
+            </Option>
+            <Option textValue="Bar" value="Bar">
+              Bar
+            </Option>
           </Autocomplete>
         </Field>
         <Field name="comment">
diff --git a/apps/remote-dom-demo/src/app/remote/simple-form/page.tsx b/apps/remote-dom-demo/src/app/remote/simple-form/page.tsx
@@ -13,8 +13,6 @@ import {
   CheckboxGroup,
   Checkbox,
   Button,
-  ContextMenu,
-  MenuItem,
   Autocomplete,
 } from "@mittwald/flow-remote-react-components";
 import { useState } from "react";
@@ -53,14 +51,12 @@ export default function Page() {
         </RadioGroup>
         <Autocomplete>
           <TextField name="text" aria-label="Text" />
-          <ContextMenu>
-            <MenuItem textValue="Foo" id="Foo">
-              Foo
-            </MenuItem>
-            <MenuItem textValue="Bar" id="Bar">
-              Bar
-            </MenuItem>
-          </ContextMenu>
+          <Option textValue="Foo" value="Foo">
+            Foo
+          </Option>
+          <Option textValue="Bar" value="Bar">
+            Bar
+          </Option>
         </Autocomplete>
 
         <Select name="select" aria-label="Select">
diff --git a/packages/components/src/components/Autocomplete/Autocomplete.module.scss b/packages/components/src/components/Autocomplete/Autocomplete.module.scss
@@ -1,3 +1,7 @@
+.autocomplete {
+  display: flex;
+}
+
 .empty {
   padding: var(--size-px--xs) var(--size-px--s);
 }
diff --git a/packages/components/src/components/Autocomplete/Autocomplete.tsx b/packages/components/src/components/Autocomplete/Autocomplete.tsx
@@ -7,13 +7,18 @@ import {
   flowComponent,
   type FlowComponentProps,
 } from "@/lib/componentFactory/flowComponent";
-import { useLocalizedStringFormatter } from "react-aria";
-import styles from "./Autocomplete.module.scss";
-import locales from "./locales/*.locale.json";
-import { Text } from "@/components/Text";
 import type { SearchFieldProps } from "@/components/SearchField";
 import type { TextFieldProps } from "@/components/TextField";
-
+import Options from "@/components/Options";
+import { TunnelExit } from "@mittwald/react-tunnel";
+import locales from "./locales/*.locale.json";
+import Text from "@/components/Text";
+import styles from "./Autocomplete.module.scss";
+import {
+  UNSAFE_PortalProvider,
+  useFocusWithin,
+  useLocalizedStringFormatter,
+} from "react-aria";
 export interface AutocompleteProps
   extends PropsWithChildren,
     PropsWithClassName,
@@ -23,17 +28,21 @@ export interface AutocompleteProps
 /** @flr-generate all */
 export const Autocomplete = flowComponent("Autocomplete", (props) => {
   const { children, ...rest } = props;
-  const stringFormatter = useLocalizedStringFormatter(locales);
 
   const { contains } = Aria.useFilter({ sensitivity: "base" });
-
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const container = useRef(null);
   const triggerRef = useRef<HTMLInputElement>(null);
 
-  const controller = useOverlayController("ContextMenu", {
+  const controller = useOverlayController("Popover", {
     reuseControllerFromContext: false,
   });
   const menuIsOpen = controller.useIsOpen();
 
+  const focusWithin = useFocusWithin({
+    onBlurWithin: controller.close,
+  });
+
   const inputProps: SearchFieldProps & TextFieldProps = {
     onKeyDown: (e) => {
       if (e.key === "Enter" && menuIsOpen) {
@@ -43,32 +52,18 @@ export const Autocomplete = flowComponent("Autocomplete", (props) => {
     ref: triggerRef,
   };
 
+  const renderEmptyState = () => (
+    <Text className={styles.empty}>
+      {stringFormatter.format("autocomplete.empty")}
+    </Text>
+  );
+
   const propsContext: PropsContext = {
-    ContextMenu: {
-      placement: "bottom start",
-      controller,
-      isNonModal: true,
-      renderEmptyState: () => (
-        <Text className={styles.empty}>
-          {stringFormatter.format("autocomplete.empty")}
-        </Text>
-      ),
-      onAction: (key) => {
-        const input = triggerRef.current;
-        if (input) {
-          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-            window.HTMLInputElement.prototype,
-            "value",
-          )?.set;
-          nativeInputValueSetter?.call(input, String(key));
-          const event = new Event("input", { bubbles: true });
-          input.dispatchEvent(event);
-        }
-      },
-      triggerRef,
-    },
     SearchField: inputProps,
     TextField: inputProps,
+    Option: {
+      tunnelId: "options",
+    },
   };
 
   const handleOnInputChange = (value: string) => {
@@ -79,19 +74,49 @@ export const Autocomplete = flowComponent("Autocomplete", (props) => {
     }
   };
 
+  const handleOptionAction = (key: Aria.Key) => {
+    const inputElement = triggerRef.current;
+    if (inputElement) {
+      // Set value on input element and trigger change event
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value",
+      )?.set;
+      nativeInputValueSetter?.call(inputElement, String(key));
+      const event = new Event("change", { bubbles: true });
+      inputElement.dispatchEvent(event);
+    }
+    controller.close();
+  };
+
   return (
     <PropsContextProvider
       props={propsContext}
       mergeInParentContext
       dependencies={[menuIsOpen, controller]}
     >
-      <Aria.Autocomplete
-        onInputChange={handleOnInputChange}
-        filter={contains}
-        {...rest}
-      >
-        {children}
-      </Aria.Autocomplete>
+      <div {...focusWithin.focusWithinProps} ref={container}>
+        <UNSAFE_PortalProvider getContainer={() => container.current}>
+          <Aria.Autocomplete
+            onInputChange={handleOnInputChange}
+            filter={contains}
+            disableAutoFocusFirst
+            {...rest}
+          >
+            {children}
+            <Options
+              onAction={handleOptionAction}
+              triggerRef={triggerRef}
+              controller={controller}
+              renderEmptyState={renderEmptyState}
+              isNonModal
+              placement="bottom start"
+            >
+              <TunnelExit id="options" />
+            </Options>
+          </Aria.Autocomplete>
+        </UNSAFE_PortalProvider>
+      </div>
     </PropsContextProvider>
   );
 });
diff --git a/packages/components/src/components/Autocomplete/stories/Default.stories.tsx b/packages/components/src/components/Autocomplete/stories/Default.stories.tsx
@@ -4,8 +4,7 @@ import type { Chat } from "@/components/Chat";
 import { Autocomplete } from "@/components/Autocomplete";
 import { Label } from "@/components/Label";
 import { SearchField } from "@/components/SearchField";
-import { MenuItem } from "@/components/MenuItem";
-import { ContextMenu } from "@/components/ContextMenu";
+import Option from "@/components/Option";
 
 const meta: Meta<typeof Chat> = {
   title: "Form Controls/Autocomplete",
@@ -18,9 +17,9 @@ const meta: Meta<typeof Chat> = {
       return ["example.com", "test.org", "email.net", "mail.com"].map((d) => {
         const email = `${value.split("@")[0]}@${d}`;
         return (
-          <MenuItem key={email} id={email} textValue={email}>
+          <Option key={email} value={email} textValue={email}>
             {email}
-          </MenuItem>
+          </Option>
         );
       });
     };
@@ -32,13 +31,26 @@ const meta: Meta<typeof Chat> = {
         <SearchField onChange={setInput} value={input}>
           <Label>Test</Label>
         </SearchField>
-        <ContextMenu>{suggestEmail(input)}</ContextMenu>
+        {suggestEmail(input)}
       </Autocomplete>
     );
   },
 };
 export default meta;
 
+export const FixedOptions: Story = {
+  render: () => (
+    <Autocomplete>
+      <SearchField>
+        <Label>Test</Label>
+      </SearchField>
+      <Option value="example.com">example.com</Option>
+      <Option value="domain.de">domain.de</Option>
+      <Option value="test.org">test.org</Option>
+    </Autocomplete>
+  ),
+};
+
 type Story = StoryObj<typeof Autocomplete>;
 
 export const Default: Story = {};
diff --git a/packages/components/src/components/Options/Options.tsx b/packages/components/src/components/Options/Options.tsx
diff --git a/packages/components/src/components/Popover/Popover.tsx b/packages/components/src/components/Popover/Popover.tsx
diff --git a/packages/components/src/components/propTypes/index.ts b/packages/components/src/components/propTypes/index.ts
diff --git a/packages/components/src/integrations/react-hook-form/components/Field/stories/Autocomplete.stories.tsx b/packages/components/src/integrations/react-hook-form/components/Field/stories/Autocomplete.stories.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
	`1`	`+.autocomplete {`
	`2`	`+ display: flex;`
	`3`	`+}`
	`4`	`+`
`1`	`5`	`.empty {`
`2`	`6`	`padding: var(--size-px--xs) var(--size-px--s);`
`3`	`7`	`}`