Skip to content

feat: support allowClear #729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hawwei913 wants to merge 5 commits into
base: master
Choose a base branch
from
+117 −0
Open

feat: support allowClear #729

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a497a8d
feat: add allowClear
hawwei913 Dec 7, 2025
5a8fb15
fix: allowClear type definition
hawwei913 Dec 7, 2025
65a6681
docs: add allowClear documentation & examples
hawwei913 Dec 7, 2025
3c7572d
docs: update allowClear type definition
hawwei913 Dec 7, 2025
b9afe24
fix: improve clear button logic
hawwei913 Dec 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions assets/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,17 @@
}
}

&-clear-icon {
padding: 0;
font-size: 12px;
background: none;
border: none;

&-hidden {
display: none;
}
}

.handler-disabled() {
opacity: 0.3;
&:hover {
Expand Down
12 changes: 12 additions & 0 deletions docs/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,18 @@ nav:
<td>Number</td>
<td></td>
<td>Specifies the defaultValue of an InputNumber</td>
</tr>
<tr>
<td>allowClear</td>
<td>boolean | { clearIcon?: React.ReactNode; clearValue: T }</td>
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The type for allowClear is documented as having a required clearValue property when it's an object. However, in the implementation (src/InputNumber.tsx) and the demo (docs/demo/allow-clear.tsx), clearValue is optional. Please update the documentation to reflect that clearValue is optional to avoid confusion for users of the component.

It should be clearValue?: T.

Suggested change
<td>boolean | { clearIcon?: React.ReactNode; clearValue: T }</td>
<td>boolean | { clearIcon?: React.ReactNode; clearValue?: T }</td>

<td>false</td>
<td>If allow to remove input content with clear icon</td>
</tr>
<tr>
<td>onClear</td>
<td>Function</td>
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The type for onClear is documented as Function, which is a bit vague. It would be more helpful to provide the actual function signature, which is () => void.

Suggested change
<td>Function</td>
<td>() => void</td>

<td></td>
<td>Called when value of an InputNumber cleared</td>
</tr>
<tr>
<td>onChange</td>
Expand Down
55 changes: 55 additions & 0 deletions docs/demo/allow-clear.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
/* eslint no-console:0 */
import InputNumber from '@rc-component/input-number';
import React from 'react';
import '../../assets/index.less';

export default () => {
const [value, setValue] = React.useState<string | number>(100);

const onChange = (val: number) => {
console.log('onChange:', val, typeof val);
setValue(val);
};

return (
<div style={{ margin: 10 }}>
<InputNumber style={{ width: 200 }} value={value} onChange={onChange} allowClear={true} />

<hr />
<h3>with suffix</h3>

<InputNumber
style={{ width: 200 }}
value={value}
onChange={onChange}
prefix="¥"
suffix="RMB"
allowClear={true}
/>

<hr />
<h3>with custom clear value</h3>

<InputNumber
style={{ width: 200 }}
value={value}
onChange={onChange}
prefix="¥"
suffix="RMB"
allowClear={{ clearValue: 1 }}
/>

<hr />
<h3>with custom clear icon</h3>

<InputNumber
style={{ width: 200 }}
value={value}
onChange={onChange}
prefix="¥"
suffix="RMB"
allowClear={{ clearIcon: <span style={{ color: 'red' }}>clear</span> }}
/>
</div>
);
};
4 changes: 4 additions & 0 deletions docs/example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,7 @@ nav:
## spinner

<code src="./demo/spinner.tsx"></code>

## allow-clear

<code src="./demo/allow-clear.tsx"></code>
38 changes: 38 additions & 0 deletions src/InputNumber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
step?: ValueType;
tabIndex?: number;
controls?: boolean;
allowClear?: boolean | { clearIcon?: React.ReactNode; clearValue?: T };
prefix?: React.ReactNode;
suffix?: React.ReactNode;
classNames?: Partial<Record<SemanticName, string>>;
Expand All @@ -119,6 +120,7 @@ export interface InputNumberProps<T extends ValueType = ValueType>
onInput?: (text: string) => void;
onChange?: (value: T | null) => void;
onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
onClear?: () => void;

onStep?: (
value: T,
Expand Down Expand Up @@ -155,6 +157,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r

prefix,
suffix,
allowClear,
stringMode,

parser,
Expand All @@ -165,6 +168,7 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
onChange,
onInput,
onPressEnter,
onClear,
onStep,

// Mouse Events
Expand Down Expand Up @@ -655,6 +659,38 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
</StepHandler>
);

let clearButton: React.ReactNode = null;
if (allowClear) {
const needClear = !disabled && !readOnly && !decimalValue.isEmpty();
const clearIconCls = `${prefixCls}-clear-icon`;
const iconNode =
typeof allowClear === 'object' && allowClear.clearIcon ? allowClear.clearIcon : '✖';

const onInternalClear = () => {
const value = getMiniDecimal(typeof allowClear === 'object' && allowClear.clearValue);

triggerValueUpdate(value, false);
};

clearButton = (
<button
type="button"
tabIndex={-1}
onClick={() => {
onInternalClear();
onClear?.();
}}
onMouseDown={(e) => e.preventDefault()}
className={clsx(`${prefixCls}-clear-icon`, {
[`${clearIconCls}-hidden`]: !needClear,
[`${clearIconCls}-has-suffix`]: !!suffix,
})}
Comment on lines +681 to +684
Copy link

@coderabbitai coderabbitai bot Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

CSS 类名可能未定义。

第 686 行引用了 CSS 类 ${clearIconCls}-has-suffix，但在 assets/index.less 中未找到该类的定义。这可能导致该类名不起作用。

如果该类名用于在存在 suffix 时调整清除按钮的位置，请在 assets/index.less 中添加相应的样式定义。如果不需要，请移除此类名。

🤖 Prompt for AI Agents 
In src/InputNumber.tsx around lines 684 to 687, the class
`${clearIconCls}-has-suffix` is being applied but no corresponding CSS exists in
assets/index.less; either add a style block for `.${clearIconCls}-has-suffix` in
assets/index.less that adjusts the clear-button positioning when a suffix is
present (mirror the existing `.${clearIconCls}-hidden`/base clear-icon rules and
include margin/positioning tweaks), or remove the `${clearIconCls}-has-suffix`
entry from the clsx call if no special styling is required.

>
{iconNode}
</button>
);
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Dec 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The logic for handling allowClear can be simplified to improve readability and reduce code duplication. You can destructure clearIcon and clearValue from an options object, and consolidate the onClick handler.

Additionally, the CSS class ${clearIconCls}-has-suffix is being added, but there are no corresponding styles for it in assets/index.less. If this class is not used, it should be removed to avoid dead code. I've kept it in the suggestion below, but please consider removing it if it's not needed.

    const clearOptions = typeof allowClear === 'object' ? allowClear : {};
    const { clearIcon = '✖', clearValue } = clearOptions;

    const onInternalClear = () => {
      const value = getMiniDecimal(clearValue);
      triggerValueUpdate(value, false);
      onClear?.();
    };

    clearButton = (
      <button
        type="button"
        tabIndex={-1}
        onClick={onInternalClear}
        onMouseDown={(e) => e.preventDefault()}
        className={clsx(`${prefixCls}-clear-icon`, {
          [`${clearIconCls}-hidden`]: !needClear,
          [`${clearIconCls}-has-suffix`]: !!suffix,
        })}
      >
        {clearIcon}
      </button>
    );

}

// >>>>>> Render
return (
<div
Expand Down Expand Up @@ -709,6 +745,8 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
{...restProps}
/>

{clearButton}

{suffix !== undefined && (
<div className={clsx(`${prefixCls}-suffix`, classNames?.suffix)} style={styles?.suffix}>
{suffix}
Expand Down