.dumirc.ts

@@ -1,5 +1,8 @@
 import { defineConfig } from 'dumi';
 
+const basePath = process.env.GH_PAGES ? '/input/' : '/';
+const publicPath = process.env.GH_PAGES ? '/input/' : '/';
+
 export default defineConfig({
   mfsu: false,
   favicons: ['https://avatars0.githubusercontent.com/u/9441414?s=200&v=4'],
@@ -8,4 +11,6 @@ export default defineConfig({
     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   },
   outputPath: '.doc',
+  base: basePath,
+  publicPath,
 });

.fatherrc.ts

@@ -1,10 +1,5 @@
 import { defineConfig } from 'father';
 
 export default defineConfig({
-  platform: 'browser',
-  cjs: { output: 'lib' },
-  esm: {
-    output: 'es',
-    alias: { 'rc-util/lib': 'rc-util/es' },
-  },
+  plugins: ['@rc-component/father-plugin'],
 });

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

.github/workflows/main.yml

@@ -1,114 +1,6 @@
-name: CI
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-
+name: ✅ test
+on: [push, pull_request]
 jobs:
-  setup:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '12'
-
-      - name: cache package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: create package-lock.json
-        run: npm i --package-lock-only
-
-      - name: hack for singe file
-        run: |
-          if [ ! -d "package-temp-dir" ]; then
-            mkdir package-temp-dir
-          fi
-          cp package-lock.json package-temp-dir
-
-      - name: cache node_modules
-        id: node_modules_cache_id
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: install
-        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci
-
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: lint
-        run: npm run lint
-
-    needs: setup
-
-  compile:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: compile
-        run: npm run compile
-
-    needs: setup
-
-  coverage:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: coverage
-        run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash)
-
-    needs: setup
+  test:
+    uses: react-component/rc-test/.github/workflows/test.yml@main
+    secrets: inherit

.gitignore

@@ -41,3 +41,4 @@ dist/
 .dumi/tmp
 .dumi/tmp-production
 .node
+bun.lockb

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

README.md

@@ -1,21 +1,30 @@
 # rc-input ⌨️
 
-[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![Dependencies][david-image]](david-url) [![DevDependencies][david-dev-image]][david-dev-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
+[![NPM version][npm-image]][npm-url]
+[![npm download][download-image]][download-url]
+[![build status][github-actions-image]][github-actions-url]
+[![Codecov][codecov-image]][codecov-url]
+[![bundle size][bundlephobia-image]][bundlephobia-url]
+[![dumi][dumi-image]][dumi-url]
 
 [npm-image]: http://img.shields.io/npm/v/rc-input.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-input
+[npm-url]: http://npmjs.org/package/rc-select
+[travis-image]: https://img.shields.io/travis/react-component/input/master?style=flat-square
+[travis-url]: https://travis-ci.com/react-component/input
 [github-actions-image]: https://github.com/react-component/input/workflows/CI/badge.svg
 [github-actions-url]: https://github.com/react-component/input/actions
 [codecov-image]: https://img.shields.io/codecov/c/github/react-component/input/master.svg?style=flat-square
-[codecov-url]: https://codecov.io/gh/react-component/input/branch/master
+[codecov-url]: https://app.codecov.io/gh/react-component/input
 [david-url]: https://david-dm.org/react-component/input
 [david-image]: https://david-dm.org/react-component/input/status.svg?style=flat-square
 [david-dev-url]: https://david-dm.org/react-component/input?type=dev
 [david-dev-image]: https://david-dm.org/react-component/input/dev-status.svg?style=flat-square
-[download-image]: https://img.shields.io/npm/dm/rc-input.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-input
-[bundlephobia-url]: https://bundlephobia.com/result?p=rc-input
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-input
+[download-image]: https://img.shields.io/npm/dm/rc-select.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-select
+[bundlephobia-url]: https://bundlephobia.com/package/rc-select
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-select
+[dumi-url]: https://github.com/umijs/dumi
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 
 ## Install
 

assets/index.less

@@ -22,8 +22,10 @@
   }
 
   &-clear-icon {
+    padding: 0;
     font-size: 12px;
-    cursor: pointer;
+    background: none;
+    border: none;
 
     &-hidden {
       display: none;

bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+peer = false

docs/examples/addon.tsx

@@ -1,7 +1,7 @@
+import Input from '@rc-component/input';
 import type { FC } from 'react';
 import React from 'react';
 import '../../assets/index.less';
-import Input from 'rc-input';
 
 const Demo: FC = () => {
   return (

docs/examples/allow-clear.tsx

@@ -1,7 +1,7 @@
 import type { ChangeEvent, FC } from 'react';
 import React, { useState } from 'react';
 import '../../assets/index.less';
-import Input from 'rc-input';
+import Input from '@rc-component/input';
 
 const Demo: FC = () => {
   const [value, setValue] = useState<string>('');

docs/examples/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 import '../../assets/index.less';
-import Input from 'rc-input';
+import Input from '@rc-component/input';
 
 const Demo: FC = () => (
   <Input prefixCls="rc-input" style={{ marginLeft: 200 }} />

docs/examples/prefix-suffix.tsx

@@ -1,4 +1,4 @@
-import Input from 'rc-input';
+import Input from '@rc-component/input';
 import type { FC } from 'react';
 import React from 'react';
 import '../../assets/index.less';

docs/examples/show-count.tsx

@@ -1,4 +1,4 @@
-import Input from 'rc-input';
+import Input from '@rc-component/input';
 import type { FC } from 'react';
 import React from 'react';
 import '../../assets/index.less';

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-input",
-  "version": "1.4.5",
+  "name": "@rc-component/input",
+  "version": "1.0.1",
   "description": "React input component",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d .doc",
     "compile": "father build && lessc assets/index.less assets/index.css",
-    "gh-pages": "npm run docs:build && npm run docs:deploy",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
+    "gh-pages": "GH_PAGES=1 npm run docs:build && npm run docs:deploy",
+    "prepublishOnly": "npm run compile && rc-np",
     "postpublish": "npm run gh-pages",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
@@ -44,35 +44,35 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@babel/runtime": "^7.11.1",
     "classnames": "^2.2.1",
-    "rc-util": "^5.18.1"
+    "@rc-component/util": "^1.2.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^13.0.0",
+    "@rc-component/father-plugin": "^2.0.3",
+    "@rc-component/np": "^1.0.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.0.0-beta",
     "@types/classnames": "^2.2.9",
-    "@types/jest": "^26.0.24",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
-    "@umijs/fabric": "^2.0.8",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.1",
+    "@umijs/fabric": "^4.0.0",
     "coveralls": "^3.0.6",
     "cross-env": "^7.0.2",
     "dumi": "^2.1.14",
-    "eslint": "^7.0.0",
+    "eslint": "^8.0.0",
     "father": "^4.3.7",
-    "gh-pages": "^3.1.0",
-    "husky": "^8.0.1",
-    "less": "^3.10.3",
-    "lint-staged": "^13.0.3",
-    "np": "^7.0.0",
-    "prettier": "^2.0.5",
-    "pretty-quick": "^3.0.0",
+    "gh-pages": "^6.2.0",
+    "husky": "^9.1.7",
+    "less": "^4.2.1",
+    "lint-staged": "^15.2.11",
+    "prettier": "^3.4.2",
+    "pretty-quick": "^4.0.0",
     "rc-test": "^7.0.15",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "typescript": "^4.0.5"
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
     "react": ">=16.0.0",
@@ -85,8 +85,7 @@
   },
   "lint-staged": {
     "**/*.{js,jsx,tsx,ts,md,json}": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   },
   "cnpm": {

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,
@@ -28,6 +33,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     dataAttrs,
     styles,
     components,
+    onClear,
   } = props;
 
   const inputElement = children ?? inputEl;
@@ -47,13 +53,22 @@ const BaseInput: FC<BaseInputProps> = (props) => {
 
   const hasAffix = hasPrefixSuffix(props);
 
-  let element: ReactElement = cloneElement(inputElement, {
+  let element: ReactElement = cloneElement(inputElement as ReactElement<any>, {
     value,
     className:
-      clsx(inputElement.props.className, !hasAffix && classNames?.variant) ||
-      null,
+      clsx(
+        (inputElement as ReactElement<any>).props?.className,
+        !hasAffix && classNames?.variant,
+      ) || null,
   });
 
+  // ======================== Ref ======================== //
+  const groupRef = useRef<HTMLDivElement>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    nativeElement: groupRef.current || containerRef.current,
+  }));
+
   // ================== Prefix & Suffix ================== //
   if (hasAffix) {
     // ================== Clear Icon ================== //
@@ -67,20 +82,23 @@ const BaseInput: FC<BaseInputProps> = (props) => {
           : '✖';
 
       clearIcon = (
-        <span
-          onClick={handleReset}
+        <button
+          type="button"
+          tabIndex={-1}
+          onClick={(event) => {
+            handleReset?.(event);
+            onClear?.();
+          }}
           // Do not trigger onBlur when clear input
           // https://github.com/ant-design/ant-design/issues/31200
           onMouseDown={(e) => e.preventDefault()}
           className={clsx(clearIconCls, {
             [`${clearIconCls}-hidden`]: !needClear,
             [`${clearIconCls}-has-suffix`]: !!suffix,
           })}
-          role="button"
-          tabIndex={-1}
         >
           {iconNode}
-        </span>
+        </button>
       );
     }
 
@@ -157,7 +175,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}>
@@ -176,14 +194,15 @@ const BaseInput: FC<BaseInputProps> = (props) => {
   }
 
   // `className` and `style` are always on the root element
-  return React.cloneElement(element, {
-    className: clsx(element.props?.className, className) || null,
+  return React.cloneElement(element as ReactElement<any>, {
+    className:
+      clsx((element as ReactElement<any>).props?.className, className) || null,
     style: {
-      ...element.props?.style,
+      ...(element as ReactElement<any>).props?.style,
       ...style,
     },
     hidden,
   });
-};
+});
 
 export default BaseInput;

src/Input.tsx

@@ -1,13 +1,14 @@
 import clsx from 'classnames';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import omit from 'rc-util/lib/omit';
+import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
+import omit from '@rc-component/util/lib/omit';
 import React, {
   forwardRef,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from 'react';
+import type { HolderRef } from './BaseInput';
 import BaseInput from './BaseInput';
 import useCount from './hooks/useCount';
 import type { ChangeEventInfo, InputProps, InputRef } from './interface';
@@ -22,6 +23,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     onBlur,
     onPressEnter,
     onKeyDown,
+    onKeyUp,
     prefixCls = 'rc-input',
     disabled,
     htmlSize,
@@ -41,8 +43,10 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
 
   const [focused, setFocused] = useState<boolean>(false);
   const compositionRef = useRef(false);
+  const keyLockRef = useRef(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const holderRef = useRef<HolderRef>(null);
 
   const focus = (option?: InputFocusOptions) => {
     if (inputRef.current) {
@@ -86,9 +90,13 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       inputRef.current?.select();
     },
     input: inputRef.current,
+    nativeElement: holderRef.current?.nativeElement || inputRef.current,
   }));
 
   useEffect(() => {
+    if (keyLockRef.current) {
+      keyLockRef.current = false;
+    }
     setFocused((prev) => (prev && disabled ? false : prev));
   }, [disabled]);
 
@@ -152,18 +160,28 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (onPressEnter && e.key === 'Enter') {
+    if (onPressEnter && e.key === 'Enter' && !keyLockRef.current) {
+      keyLockRef.current = true;
       onPressEnter(e);
     }
     onKeyDown?.(e);
   };
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      keyLockRef.current = false;
+    }
+    onKeyUp?.(e);
+  };
 
   const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
     setFocused(true);
     onFocus?.(e);
   };
 
   const handleBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
+    if (keyLockRef.current) {
+      keyLockRef.current = false;
+    }
     setFocused(false);
     onBlur?.(e);
   };
@@ -202,6 +220,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         'htmlSize',
         'styles',
         'classNames',
+        'onClear',
       ],
     );
     return (
@@ -212,6 +231,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         onFocus={handleFocus}
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
         className={clsx(
           prefixCls,
           {

src/interface.ts

@@ -52,6 +52,7 @@ export interface BaseInputProps extends CommonInputProps {
   triggerFocus?: () => void;
   readOnly?: boolean;
   handleReset?: MouseEventHandler;
+  onClear?: () => void;
   hidden?: boolean;
   dataAttrs?: {
     affixWrapper?: DataAttr;
@@ -136,6 +137,7 @@ export interface InputProps
     count?: CSSProperties;
   };
   count?: CountConfig;
+  onClear?: () => void;
 }
 
 export interface InputRef {
@@ -148,6 +150,7 @@ export interface InputRef {
   ) => void;
   select: () => void;
   input: HTMLInputElement | null;
+  nativeElement: HTMLElement | null;
 }
 
 export interface ChangeEventInfo {

src/utils/commonUtils.ts

@@ -38,6 +38,10 @@ function cloneEvent<
     currentTarget.selectionEnd = target.selectionEnd;
   }
 
+  currentTarget.setSelectionRange = (...args) => {
+    target.setSelectionRange(...args);
+  };
+
   return newEvent;
 }
 

tests/BaseInput.test.tsx

@@ -1,7 +1,8 @@
 import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 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', () => {
@@ -45,11 +46,13 @@ describe('BaseInput', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('allowClear should work', () => {
+  describe('allowClear should work', () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
     const onFocus = jest.fn();
 
+    const user = userEvent.setup();
+
     const Demo: FC = () => {
       const [value, setValue] = useState<string>('');
 
@@ -74,23 +77,53 @@ describe('BaseInput', () => {
       );
     };
 
-    const { container } = render(<Demo />);
+    it('By click', () => {
+      const { container } = render(<Demo />);
 
-    const inputEl = container.querySelector('input');
-    fireEvent.focus(inputEl!);
-    expect(onFocus).toHaveBeenCalledTimes(1);
+      const inputEl = container.querySelector('input');
+      fireEvent.focus(inputEl!);
+      expect(onFocus).toHaveBeenCalledTimes(1);
 
-    fireEvent.change(inputEl!, { target: { value: 'some text' } });
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(inputEl!.value).toBe('some text');
+      fireEvent.change(inputEl!, { target: { value: 'some text' } });
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(inputEl!.value).toBe('some text');
 
-    const clearIcon = container.querySelector('.rc-input-clear-icon');
-    fireEvent.mouseDown(clearIcon!);
-    fireEvent.click(clearIcon!);
-    fireEvent.mouseUp(clearIcon!);
-    expect(onBlur).not.toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(inputEl!.value).toBe('');
+      const clearIcon = container.querySelector('.rc-input-clear-icon');
+      fireEvent.mouseDown(clearIcon!);
+      fireEvent.click(clearIcon!);
+      fireEvent.mouseUp(clearIcon!);
+      expect(onBlur).not.toHaveBeenCalled();
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(inputEl!.value).toBe('');
+    });
+
+    // it('By focus and Space', async () => {
+    //   const { container } = render(<Demo />);
+
+    //   const inputEl = container.querySelector('input');
+    //   await user.click(inputEl!);
+
+    //   await user.type(inputEl!, 'some text');
+    //   expect(inputEl!.value).toBe('some text');
+
+    //   await user.tab();
+    //   await user.keyboard('[Space]');
+    //   expect(inputEl!.value).toBe('');
+    // });
+
+    // it('By focus and Enter', async () => {
+    //   const { container } = render(<Demo />);
+
+    //   const inputEl = container.querySelector('input');
+    //   await user.click(inputEl!);
+
+    //   await user.type(inputEl!, 'some text');
+    //   expect(inputEl!.value).toBe('some text');
+
+    //   await user.tab();
+    //   await user.keyboard('[Enter]');
+    //   expect(inputEl!.value).toBe('');
+    // });
   });
 
   it('should display clearIcon correctly', () => {
@@ -267,4 +300,62 @@ 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'),
+      );
+    });
+
+    it('support onClear', () => {
+      const onClear = jest.fn();
+      const { container } = render(
+        <BaseInput prefixCls="rc-input" onClear={onClear} allowClear>
+          <input defaultValue="test" />
+        </BaseInput>,
+      );
+      fireEvent.click(
+        container.querySelector<HTMLSpanElement>('.rc-input-clear-icon')!,
+      );
+      expect(onClear).toHaveBeenCalled();
+    });
+  });
 });

tests/__snapshots__/index.test.tsx.snap

@@ -115,13 +115,13 @@ exports[`Input allowClear should change type when click 1`] = `
     <span
       class="rc-input-suffix"
     >
-      <span
+      <button
         class="rc-input-clear-icon"
-        role="button"
         tabindex="-1"
+        type="button"
       >
         ✖
-      </span>
+      </button>
     </span>
   </span>
 </div>
@@ -140,13 +140,13 @@ exports[`Input allowClear should change type when click 2`] = `
     <span
       class="rc-input-suffix"
     >
-      <span
+      <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
-        role="button"
         tabindex="-1"
+        type="button"
       >
         ✖
-      </span>
+      </button>
     </span>
   </span>
 </div>
@@ -165,13 +165,13 @@ exports[`Input allowClear should not show icon if defaultValue is undefined or e
     <span
       class="rc-input-suffix"
     >
-      <span
+      <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
-        role="button"
         tabindex="-1"
+        type="button"
       >
         ✖
-      </span>
+      </button>
     </span>
   </span>
 </div>
@@ -190,13 +190,13 @@ exports[`Input allowClear should not show icon if defaultValue is undefined or e
     <span
       class="rc-input-suffix"
     >
-      <span
+      <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
-        role="button"
         tabindex="-1"
+        type="button"
       >
         ✖
-      </span>
+      </button>
     </span>
   </span>
 </div>
@@ -215,13 +215,13 @@ exports[`Input allowClear should not show icon if value is undefined or empty st
     <span
       class="rc-input-suffix"
     >
-      <span
+      <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
-        role="button"
         tabindex="-1"
+        type="button"
       >
         ✖
-      </span>
+      </button>
     </span>
   </span>
 </div>
@@ -240,13 +240,13 @@ exports[`Input allowClear should not show icon if value is undefined or empty st
     <span
       class="rc-input-suffix"
     >
-      <span
+      <button
         class="rc-input-clear-icon rc-input-clear-icon-hidden"
-        role="button"
         tabindex="-1"
+        type="button"
       >
         ✖
-      </span>
+      </button>
     </span>
   </span>
 </div>

tests/focus.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
-import Input from 'rc-input';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
+import Input from '../src';
 import { fireEvent, render } from '@testing-library/react';
 
 const getInputRef = () => {

tests/index.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import Input from '../src';
 import type { InputRef } from '../src/interface';
@@ -40,6 +40,54 @@ describe('Input', () => {
     expect(onPressEnter).toHaveBeenCalled();
   });
 
+  it('should prevent long press of enter', () => {
+    const onKeyDown = jest.fn();
+    const onPressEnter = jest.fn();
+    const onKeyUp = jest.fn();
+    const { container } = render(
+      <Input
+        onKeyDown={onKeyDown}
+        onPressEnter={onPressEnter}
+        onKeyUp={onKeyUp}
+      />,
+    );
+    const inputEl = container.querySelector('input')!;
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    fireEvent.keyUp(inputEl, { key: 'Enter' });
+    expect(onKeyDown).toBeCalledTimes(2);
+    expect(onPressEnter).toBeCalledTimes(1);
+    expect(onKeyUp).toBeCalledTimes(1);
+  });
+
+  it('should trigger onPressEnter after trigger onBlur', () => {
+    const onPressEnter = jest.fn();
+    const onBlur = jest.fn();
+    const { container } = render(
+      <Input onPressEnter={onPressEnter} onBlur={onBlur} />,
+    );
+    const inputEl = container.querySelector('input')!;
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    fireEvent.blur(inputEl);
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    expect(onBlur).toBeCalled();
+    expect(onPressEnter).toBeCalledTimes(2);
+  });
+
+  it('should trigger onPressEnter after disabled', () => {
+    const onPressEnter = jest.fn();
+    const { container, rerender } = render(
+      <Input onPressEnter={onPressEnter} />,
+    );
+    const inputEl = container.querySelector('input')!;
+    expect(inputEl.disabled).toBe(false);
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    rerender(<Input onPressEnter={onPressEnter} disabled={true} />);
+    expect(inputEl.disabled).toBe(true);
+    fireEvent.keyDown(inputEl, { key: 'Enter' });
+    expect(onPressEnter).toBeCalledTimes(2);
+  });
+
   it('should trigger onChange', () => {
     const onChange = jest.fn();
     const { container } = render(<Input onChange={onChange} />);
@@ -353,6 +401,10 @@ describe('Input ref', () => {
     it('selectionXXX should pass', () => {
       const onChange = jest.fn();
       const { container } = render(<Input onChange={onChange} />);
+      const spySetSelectionRange = jest.spyOn(
+        container.querySelector('input')!,
+        'setSelectionRange',
+      );
 
       const inputEl = container.querySelector('input')!;
       fireEvent.change(inputEl, { target: { value: 'test' } });
@@ -361,6 +413,10 @@ describe('Input ref', () => {
       const event = onChange.mock.calls[0][0];
       expect(event.target.selectionStart).toBe(4);
       expect(event.target.selectionEnd).toBe(4);
+
+      // Call `setSelectionRange`
+      event.target.setSelectionRange(1, 2);
+      expect(spySetSelectionRange).toHaveBeenCalledWith(1, 2);
     });
 
     it('email type not support selection', () => {
@@ -382,6 +438,21 @@ 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);
+  });
+
+  it('support onClear', () => {
+    const onClear = jest.fn();
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const { container } = render(
+      <Input onClear={onClear} defaultValue="test" allowClear />,
+    );
+    fireEvent.click(
+      container.querySelector<HTMLSpanElement>('.rc-input-clear-icon')!,
+    );
+    expect(onClear).toHaveBeenCalled();
+    expect(errorSpy).not.toHaveBeenCalled();
+    errorSpy.mockRestore();
   });
 });
 

tsconfig.json

@@ -15,7 +15,7 @@
     "paths": {
       "@/*": ["src/*"],
       "@@/*": [".dumi/tmp/*"],
-      "rc-input": ["src/index.tsx"]
+      "@rc-component/input": ["src/index.tsx"]
     }
   },
   "include": [".dumirc.ts", "**/*.ts", "**/*.tsx"]