From 203ff015df8d65d460e5647b4cffba54966fecd6 Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Tue, 6 Feb 2024 15:43:24 +0100
Subject: [PATCH 1/2] feat: add AutocompleteField

---
 src/Autocomplete/index.stories.tsx | 21 ++++++++++++++
 src/Fields/AutocompleteField.tsx   | 44 ++++++++++++++++++++++++++++++
 src/Fields/index.stories.tsx       | 10 +++++++
 3 files changed, 75 insertions(+)
 create mode 100644 src/Autocomplete/index.stories.tsx
 create mode 100644 src/Fields/AutocompleteField.tsx

diff --git a/src/Autocomplete/index.stories.tsx b/src/Autocomplete/index.stories.tsx
new file mode 100644
index 00000000..1a0874a8
--- /dev/null
+++ b/src/Autocomplete/index.stories.tsx
@@ -0,0 +1,21 @@
+import { Story } from '@storybook/react';
+import React from 'react';
+
+import { toFormInputOption } from '../Select';
+
+import { AutocompleteProps, Autocomplete } from './index';
+
+export default {
+  title: 'Autocomplete',
+};
+
+export const WithOptions: Story<AutocompleteProps> = function WithOptions(
+  args,
+) {
+  return (
+    <Autocomplete
+      options={['food', 'foo', 'foobar', 'bar'].map(toFormInputOption)}
+      {...args}
+    />
+  );
+};
diff --git a/src/Fields/AutocompleteField.tsx b/src/Fields/AutocompleteField.tsx
new file mode 100644
index 00000000..484a606a
--- /dev/null
+++ b/src/Fields/AutocompleteField.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  useController,
+  FieldValues,
+  UseControllerProps,
+  FieldPath,
+} from 'react-hook-form';
+
+import { Autocomplete, AutocompleteProps } from '../Autocomplete';
+
+import { useFieldContext } from './FieldProvider';
+import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
+
+type AutocompleteFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> = UseControllerProps<TFieldValues, TName> &
+  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
+    component?: AutocompleteProps;
+  };
+
+export function AutocompleteField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  formItem,
+  component,
+  ...controller
+}: AutocompleteFieldProps<TFieldValues, TName>) {
+  const { field } = useController<TFieldValues, TName>(controller);
+
+  const { disabled } = useFieldContext();
+
+  return (
+    <FieldWrapper controller={controller} formItem={formItem}>
+      <Autocomplete
+        {...field}
+        value={field.value ?? undefined}
+        disabled={disabled}
+        {...component}
+      />
+    </FieldWrapper>
+  );
+}
diff --git a/src/Fields/index.stories.tsx b/src/Fields/index.stories.tsx
index 456f4fea..980d4444 100644
--- a/src/Fields/index.stories.tsx
+++ b/src/Fields/index.stories.tsx
@@ -8,6 +8,7 @@ import { TextAreaRef } from '../Input';
 import { toFormInputOption } from '../Select';
 import { Space } from '../Space';
 
+import { AutocompleteField } from './AutocompleteField';
 import { CheckboxField } from './CheckboxField';
 import { FieldProvider, FieldProviderProps } from './FieldProvider';
 import { InputField } from './InputField';
@@ -23,6 +24,7 @@ export default {
 };
 
 type FormType = {
+  autocomplete: string;
   checkbox: boolean;
   input: string;
   input_number: number;
@@ -124,6 +126,14 @@ function AllFields() {
   const formMethods = useFormContext<FormType>();
   return (
     <Form>
+      <AutocompleteField
+        name="autocomplete"
+        control={formMethods.control}
+        formItem={{ label: 'Autocomplete' }}
+        component={{
+          options: ['foo', 'bar'].map(toFormInputOption),
+        }}
+      />
       <CheckboxField
         name="checkbox"
         control={formMethods.control}

From 48553e2dcc77a2dc1c5797d069deec72ecd9ecc0 Mon Sep 17 00:00:00 2001
From: Benedikt Franke <benedikt.franke@mll.com>
Date: Tue, 27 Feb 2024 15:50:34 +0100
Subject: [PATCH 2/2] explain why its broken

---
 src/Fields/AutocompleteField.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Fields/AutocompleteField.tsx b/src/Fields/AutocompleteField.tsx
index 484a606a..3ad76ba5 100644
--- a/src/Fields/AutocompleteField.tsx
+++ b/src/Fields/AutocompleteField.tsx
@@ -19,6 +19,11 @@ type AutocompleteFieldProps<
     component?: AutocompleteProps;
   };
 
+/**
+ * This component appears unstyled in Storybook because it is not properly prefixing its class names.
+ * However, if this library is used alongside globally included antd styles, it works somewhat fine.
+ * When we rip out antd 3 from our projects, we may want to remove the class prefix in this library to fix this.
+ */
 export function AutocompleteField<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,