feat: support nativeElement (#68)

* feat: support nativeElement

* chore: update

Author: zombieJ

src/BaseInput.tsx

@@ -1,10 +1,15 @@
 import clsx from 'classnames';
-import type { FC, ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import type { BaseInputProps } from './interface';
 import { hasAddon, hasPrefixSuffix } from './utils/commonUtils';
 
-const BaseInput: FC<BaseInputProps> = (props) => {
+export interface HolderRef {
+  /** Provider holder ref. Will return `null` if not wrap anything */
+  nativeElement: HTMLElement | null;
+}
+
+const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
   const {
     inputElement: inputEl,
     children,
@@ -54,6 +59,13 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       null,
   });
 
+  // ======================== Ref ======================== //
+  const groupRef = useRef<HTMLDivElement>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    nativeElement: groupRef.current || containerRef.current,
+  }));
+
   // ================== Prefix & Suffix ================== //
   if (hasAffix) {
     // ================== Clear Icon ================== //
@@ -157,7 +169,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     // Need another wrapper for changing display:table to display:inline-block
     // and put style prop in wrapper
     element = (
-      <GroupWrapperComponent className={mergedGroupClassName}>
+      <GroupWrapperComponent className={mergedGroupClassName} ref={groupRef}>
         <WrapperComponent className={mergedWrapperClassName}>
           {addonBefore && (
             <GroupAddonComponent className={addonCls}>
@@ -184,6 +196,6 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     },
     hidden,
   });
-};
+});
 
 export default BaseInput;

src/Input.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import BaseInput from './BaseInput';
+import BaseInput, { HolderRef } from './BaseInput';
 import useCount from './hooks/useCount';
 import type { ChangeEventInfo, InputProps, InputRef } from './interface';
 import type { InputFocusOptions } from './utils/commonUtils';
@@ -43,6 +43,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const compositionRef = useRef(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const holderRef = useRef<HolderRef>(null);
 
   const focus = (option?: InputFocusOptions) => {
     if (inputRef.current) {
@@ -86,6 +87,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       inputRef.current?.select();
     },
     input: inputRef.current,
+    nativeElement: holderRef.current?.nativeElement || inputRef.current,
   }));
 
   useEffect(() => {

src/interface.ts

@@ -148,6 +148,7 @@ export interface InputRef {
   ) => void;
   select: () => void;
   input: HTMLInputElement | null;
+  nativeElement: HTMLElement | null;
 }
 
 export interface ChangeEventInfo {

tests/BaseInput.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import type { ChangeEvent, FC } from 'react';
 import React, { useState } from 'react';
-import BaseInput from '../src/BaseInput';
+import BaseInput, { type HolderRef } from '../src/BaseInput';
 
 describe('BaseInput', () => {
   it('should render perfectly', () => {
@@ -267,4 +267,49 @@ describe('BaseInput', () => {
     expect(container.querySelector('.rc-input-affix-wrapper')).toBeFalsy();
     expect(container.querySelector('input')).toHaveClass('test-variant');
   });
+
+  describe('ref', () => {
+    it('prefix', () => {
+      const holderRef = React.createRef<HolderRef>();
+      const { container } = render(
+        <BaseInput prefixCls="rc-input" prefix="prefix" ref={holderRef}>
+          <input />
+        </BaseInput>,
+      );
+      expect(holderRef.current?.nativeElement).toBe(
+        container.querySelector('.rc-input-affix-wrapper'),
+      );
+    });
+
+    it('addon', () => {
+      const holderRef = React.createRef<HolderRef>();
+      const { container } = render(
+        <BaseInput prefixCls="rc-input" addonAfter="after" ref={holderRef}>
+          <input />
+        </BaseInput>,
+      );
+
+      expect(holderRef.current?.nativeElement).toBe(
+        container.querySelector('.rc-input-group-wrapper'),
+      );
+    });
+
+    it('mix', () => {
+      const holderRef = React.createRef<HolderRef>();
+      const { container } = render(
+        <BaseInput
+          prefixCls="rc-input"
+          suffix="suffix"
+          addonAfter="after"
+          ref={holderRef}
+        >
+          <input />
+        </BaseInput>,
+      );
+
+      expect(holderRef.current?.nativeElement).toBe(
+        container.querySelector('.rc-input-group-wrapper'),
+      );
+    });
+  });
 });

tests/index.test.tsx

@@ -382,6 +382,7 @@ describe('Input ref', () => {
     const { container } = render(<Input ref={ref} defaultValue="light" />);
     const inputEl = container.querySelector('input')!;
     expect(ref.current?.input).toBe(inputEl);
+    expect(ref.current?.nativeElement).toBe(inputEl);
   });
 });