Forward ref select autocomplete field (#275)

feat: add property `ref` to `SelectField` and `AutocompleteField`

src/Fields/AutocompleteField.tsx

@@ -1,3 +1,4 @@
+import type { BaseSelectRef } from 'rc-select';
 import React from 'react';
 import {
   useController,
@@ -16,7 +17,9 @@ type AutocompleteFieldProps<
   TName extends FieldPath<TFieldValues>,
 > = UseControllerProps<TFieldValues, TName> &
   Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
-    component?: AutocompleteProps;
+    component?: AutocompleteProps & {
+      ref?: React.Ref<BaseSelectRef>;
+    };
   };
 
 /**

src/Fields/SelectField.tsx

@@ -36,7 +36,7 @@ export function SelectField<
   ...controller
 }: SelectFieldProps<TFieldValues, TName, TOption>) {
   const {
-    field: { ref, onChange, ...fieldProps },
+    field: { onChange, ...fieldProps },
   } = useController<TFieldValues, TName>(controller);
 
   const { disabled } = useFieldContext();

src/Select/index.tsx

@@ -1,6 +1,14 @@
 import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
 import { BaseOptionType, DefaultOptionType } from 'antd/lib/select';
-import React, { ReactElement, useCallback } from 'react';
+import { BaseSelectRef } from 'rc-select';
+import React, {
+  ForwardedRef,
+  forwardRef,
+  ReactElement,
+  ReactNode,
+  RefAttributes,
+  useCallback,
+} from 'react';
 import styled from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';
@@ -10,35 +18,46 @@ export * from './formInput';
 export type SelectProps<
   ValueType = unknown,
   OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
-> = AntdSelectProps<ValueType, OptionType>;
+> = AntdSelectProps<ValueType, OptionType> & RefAttributes<BaseSelectRef>;
 
 const StyledSelect = styled(AntdSelect)`
   &,
   .mll-ant-select-arrow {
     font-size: ${fontSizeFromTheme};
   }
+
   .mll-ant-select-selection-item-remove {
     font-size: 0.85em;
   }
+
   &.mll-ant-select-sm.mll-ant-select-multiple .mll-ant-select-selection-item {
     height: 16px;
     line-height: 12px;
-    margin-top: 0px;
-    margin-bottom: 0px;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 ` as typeof AntdSelect;
 
 const StyledDropdown = styled.div`
   font-size: ${fontSizeFromTheme};
+
   .mll-ant-select-item {
     font-size: 1em;
   }
 `;
 
-export function Select<
+function SelectInner<
   ValueType = unknown,
   OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
->({ children, dropdownRender, ...props }: SelectProps<ValueType, OptionType>) {
+>(
+  {
+    children,
+    dropdownRender,
+    onChange,
+    ...props
+  }: SelectProps<ValueType, OptionType>,
+  ref: ForwardedRef<BaseSelectRef>,
+) {
   const styledDropdownRender = useCallback(
     (menu: ReactElement) => (
       <StyledDropdown>
@@ -50,12 +69,26 @@ export function Select<
 
   return (
     <StyledSelect<ValueType, OptionType>
+      ref={ref}
       {...props}
       dropdownRender={styledDropdownRender}
     >
       {children}
     </StyledSelect>
   );
 }
+
+export const Select = forwardRef<
+  BaseSelectRef,
+  SelectProps<unknown, BaseOptionType | DefaultOptionType>
+>(SelectInner) as unknown as (<
+  TValue = unknown,
+  TOption extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+>(
+  props: SelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>,
+) => ReactNode) & {
+  Option: typeof AntdSelect.Option;
+  OptGroup: typeof AntdSelect.OptGroup;
+};
 Select.Option = AntdSelect.Option;
 Select.OptGroup = AntdSelect.OptGroup;