Revert "refactor(Autocomplete)!: use Option component to define autocomplete …"

ins0 · web-flow · commit da8e23ecefad · 2025-07-11T10:15:23.000+02:00
This reverts commit 9488e41.
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,7 +1,8 @@
 import {
-  Option,
+  ContextMenu,
   Label,
   TextField,
+  MenuItem,
   Autocomplete,
 } from "@mittwald/flow-react-components";
 import { useState } from "react";
@@ -18,9 +19,9 @@ export default () => {
     ].map((d) => {
       const email = `${input.split("@")[0]}@${d}`;
       return (
-        <Option key={email} value={email} textValue={email}>
+        <MenuItem key={email} id={email} textValue={email}>
           {email}
-        </Option>
+        </MenuItem>
       );
     });
   };
@@ -30,7 +31,7 @@ export default () => {
       <TextField value={input} onChange={setInput}>
         <Label>Email</Label>
       </TextField>
-      {generateSuggestItems()}
+      <ContextMenu>{generateSuggestItems()}</ContextMenu>
     </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,7 +1,8 @@
 import {
-  Option,
+  ContextMenu,
   Label,
   TextField,
+  MenuItem,
   Autocomplete,
 } from "@mittwald/flow-react-components";
 import { useState } from "react";
@@ -18,9 +19,9 @@ export default () => {
     ].map((d) => {
       const email = `${input.split("@")[0]}@${d}`;
       return (
-        <Option key={email} value={email} textValue={email}>
+        <MenuItem key={email} id={email} textValue={email}>
           {email}
-        </Option>
+        </MenuItem>
       );
     });
   };
@@ -37,7 +38,7 @@ export default () => {
       <TextField value={input} onChange={setInput}>
         <Label>Email</Label>
       </TextField>
-      {generateSuggestItems()}
+      <ContextMenu>{generateSuggestItems()}</ContextMenu>
     </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,7 +4,8 @@ import {
   Autocomplete,
   Section,
   TextField,
-  Option,
+  ContextMenu,
+  MenuItem,
 } from "@mittwald/flow-react-components";
 import { useForm } from "react-hook-form";
 import {
@@ -31,9 +32,9 @@ export default () => {
     ].map((d) => {
       const email = `${currentEmailValue.split("@")[0]}@${d}`;
       return (
-        <Option key={email} value={email} textValue={email}>
+        <MenuItem key={email} id={email} textValue={email}>
           {email}
-        </Option>
+        </MenuItem>
       );
     });
   };
@@ -51,7 +52,9 @@ export default () => {
             <TextField>
               <Label>Test</Label>
             </TextField>
-            {generateSuggestItems()}
+            <ContextMenu>
+              {generateSuggestItems()}
+            </ContextMenu>
           </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,8 +1,9 @@
 import {
+  ContextMenu,
   Label,
+  MenuItem,
   Autocomplete,
   SearchField,
-  Option,
 } from "@mittwald/flow-react-components";
 import { useState } from "react";
 
@@ -18,9 +19,9 @@ export default () => {
     ].map((d) => {
       const email = `${input.split("@")[0]}@${d}`;
       return (
-        <Option key={email} value={email} textValue={email}>
+        <MenuItem key={email} id={email} textValue={email}>
           {email}
-        </Option>
+        </MenuItem>
       );
     });
   };
@@ -30,7 +31,7 @@ export default () => {
       <SearchField value={input} onChange={setInput}>
         <Label>Email</Label>
       </SearchField>
-      {generateSuggestItems()}
+      <ContextMenu>{generateSuggestItems()}</ContextMenu>
     </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,6 +13,8 @@ import {
   TextField,
   PasswordCreationField,
   Autocomplete,
+  ContextMenu,
+  MenuItem,
 } from "@mittwald/flow-remote-react-components";
 import {
   Form,
@@ -60,12 +62,14 @@ export default function Page() {
             <TextField>
               <Label>Email</Label>
             </TextField>
-            <Option textValue="Foo" value="Foo">
-              Foo
-            </Option>
-            <Option textValue="Bar" value="Bar">
-              Bar
-            </Option>
+            <ContextMenu>
+              <MenuItem textValue="Foo" id="Foo">
+                Foo
+              </MenuItem>
+              <MenuItem textValue="Bar" id="Bar">
+                Bar
+              </MenuItem>
+            </ContextMenu>
           </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,6 +13,8 @@ import {
   CheckboxGroup,
   Checkbox,
   Button,
+  ContextMenu,
+  MenuItem,
   Autocomplete,
 } from "@mittwald/flow-remote-react-components";
 import { useState } from "react";
@@ -51,12 +53,14 @@ export default function Page() {
         </RadioGroup>
         <Autocomplete>
           <TextField name="text" aria-label="Text" />
-          <Option textValue="Foo" value="Foo">
-            Foo
-          </Option>
-          <Option textValue="Bar" value="Bar">
-            Bar
-          </Option>
+          <ContextMenu>
+            <MenuItem textValue="Foo" id="Foo">
+              Foo
+            </MenuItem>
+            <MenuItem textValue="Bar" id="Bar">
+              Bar
+            </MenuItem>
+          </ContextMenu>
         </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,7 +1,3 @@
-.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,18 +7,13 @@ 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,
@@ -28,21 +23,17 @@ 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("Popover", {
+  const controller = useOverlayController("ContextMenu", {
     reuseControllerFromContext: false,
   });
   const menuIsOpen = controller.useIsOpen();
 
-  const focusWithin = useFocusWithin({
-    onBlurWithin: controller.close,
-  });
-
   const inputProps: SearchFieldProps & TextFieldProps = {
     onKeyDown: (e) => {
       if (e.key === "Enter" && menuIsOpen) {
@@ -52,18 +43,32 @@ 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) => {
@@ -74,49 +79,19 @@ 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]}
     >
-      <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>
+      <Aria.Autocomplete
+        onInputChange={handleOnInputChange}
+        filter={contains}
+        {...rest}
+      >
+        {children}
+      </Aria.Autocomplete>
     </PropsContextProvider>
   );
 });
diff --git a/packages/components/src/components/Autocomplete/stories/Default.stories.tsx b/packages/components/src/components/Autocomplete/stories/Default.stories.tsx
@@ -4,7 +4,8 @@ import type { Chat } from "@/components/Chat";
 import { Autocomplete } from "@/components/Autocomplete";
 import { Label } from "@/components/Label";
 import { SearchField } from "@/components/SearchField";
-import Option from "@/components/Option";
+import { MenuItem } from "@/components/MenuItem";
+import { ContextMenu } from "@/components/ContextMenu";
 
 const meta: Meta<typeof Chat> = {
   title: "Form Controls/Autocomplete",
@@ -17,9 +18,9 @@ const meta: Meta<typeof Chat> = {
       return ["example.com", "test.org", "email.net", "mail.com"].map((d) => {
         const email = `${value.split("@")[0]}@${d}`;
         return (
-          <Option key={email} value={email} textValue={email}>
+          <MenuItem key={email} id={email} textValue={email}>
             {email}
-          </Option>
+          </MenuItem>
         );
       });
     };
@@ -31,26 +32,13 @@ const meta: Meta<typeof Chat> = {
         <SearchField onChange={setInput} value={input}>
           <Label>Test</Label>
         </SearchField>
-        {suggestEmail(input)}
+        <ContextMenu>{suggestEmail(input)}</ContextMenu>
       </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,7 +1,3 @@`
`1`		`-.autocomplete {`
`2`		`- display: flex;`
`3`		`-}`
`4`		`-`
`5`	`1`	`.empty {`
`6`	`2`	`padding: var(--size-px--xs) var(--size-px--s);`
`7`	`3`	`}`