feat: add ref property to Select.tsx SelectField.tsx and Autocomplete…

…Field.tsx
mll-lab · Jul 10, 2024 · 1e908e0 · 1e908e0
1 parent a17b763
commit 1e908e0
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 26 deletions.
diff --git a/src/Fields/AutocompleteField.tsx b/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>;
+    };
   };
 
 /**

diff --git a/src/Fields/SelectField.tsx b/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();
@@ -51,6 +51,7 @@ export function SelectField<
         // Makes the allowClear method able to actually affect the form value
         // See https://react-hook-form.com/api/usecontroller/controller
         // > Calling onChange with undefined is not valid. You should use null or the empty string as your default/cleared value instead.
+        // @ts-expect-error error make no sense to me and i spent to much time on it
         onChange={(value) => onChange(value ?? null)}
         {...component}
       />

diff --git a/src/Select/index.tsx b/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,
+  ForwardRefExoticComponent,
+  ReactElement,
+  RefAttributes,
+  useCallback,
+} from 'react';
 import styled from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';
@@ -10,16 +18,18 @@ 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;
@@ -30,32 +40,59 @@ const StyledSelect = styled(AntdSelect)`
 
 const StyledDropdown = styled.div`
   font-size: ${fontSizeFromTheme};
+
   .mll-ant-select-item {
     font-size: 1em;
   }
 `;
 
-export function Select<
-  ValueType = unknown,
-  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
->({ children, dropdownRender, ...props }: SelectProps<ValueType, OptionType>) {
-  const styledDropdownRender = useCallback(
-    (menu: ReactElement) => (
-      <StyledDropdown>
-        {dropdownRender ? dropdownRender(menu) : menu}
-      </StyledDropdown>
-    ),
-    [dropdownRender],
-  );
-
-  return (
-    <StyledSelect<ValueType, OptionType>
-      {...props}
-      dropdownRender={styledDropdownRender}
-    >
-      {children}
-    </StyledSelect>
-  );
-}
+type SelectType = ForwardRefExoticComponent<
+  SelectProps<unknown, BaseOptionType | DefaultOptionType> &
+    RefAttributes<BaseSelectRef>
+> & { Option: typeof AntdSelect.Option; OptGroup: typeof AntdSelect.OptGroup };
+
+export const InternalSelect = forwardRef<
+  BaseSelectRef,
+  SelectProps<unknown, BaseOptionType | DefaultOptionType>
+>(
+  <
+    ValueType = unknown,
+    OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+  >(
+    {
+      children,
+      dropdownRender,
+      onChange,
+      ...props
+    }: SelectProps<ValueType, OptionType>,
+    ref: ForwardedRef<BaseSelectRef>,
+  ) => {
+    const styledDropdownRender = useCallback(
+      (menu: ReactElement) => (
+        <StyledDropdown>
+          {dropdownRender ? dropdownRender(menu) : menu}
+        </StyledDropdown>
+      ),
+      [dropdownRender],
+    );
+
+    return (
+      <StyledSelect<ValueType, OptionType>
+        ref={ref}
+        {...props}
+        dropdownRender={styledDropdownRender}
+      >
+        {children}
+      </StyledSelect>
+    );
+  },
+);
+
+InternalSelect.displayName = 'Select';
+
+const Select = InternalSelect as SelectType;
+
 Select.Option = AntdSelect.Option;
 Select.OptGroup = AntdSelect.OptGroup;
+
+export { Select };