fix: render numeric zero input affixes

src/BaseInput.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import type { ReactElement, ReactNode } from 'react';
 import React, { cloneElement, useRef } from 'react';
 import type { BaseInputProps } from './interface';
-import { hasAddon, hasPrefixSuffix } from './utils/commonUtils';
+import { hasAddon, hasContent, hasPrefixSuffix } from './utils/commonUtils';
 
 export interface HolderRef {
  /** Provider holder ref. Will return `null` if not wrap anything */
@@ -99,7 +99,7 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
  clearIconCls,
  {
  [`${clearIconCls}-hidden`]: !needClear,
- [`${clearIconCls}-has-suffix`]: !!suffix,
+ [`${clearIconCls}-has-suffix`]: hasContent(suffix),
  },
  classNames?.clear,
  )}
@@ -119,14 +119,14 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
  [`${affixWrapperPrefixCls}-focused`]: focused, // Not used, but keep it
  [`${affixWrapperPrefixCls}-readonly`]: readOnly,
  [`${affixWrapperPrefixCls}-input-with-clear-btn`]:
- suffix && allowClear && value,
+hasContent(suffix) && allowClear && value,
  },
  classes?.affixWrapper,
  classNames?.affixWrapper,
  classNames?.variant,
  );
 
- const suffixNode = (suffix || allowClear) && (
+ const suffixNode = (hasContent(suffix) || allowClear) && (
  <span
  className={clsx(`${prefixCls}-suffix`, classNames?.suffix)}
  style={styles?.suffix}
@@ -144,7 +144,7 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
  {...dataAttrs?.affixWrapper}
  ref={containerRef}
  >
- {prefix && (
+ {hasContent(prefix) && (
  <span
  className={clsx(`${prefixCls}-prefix`, classNames?.prefix)}
  style={styles?.prefix}
@@ -185,13 +185,13 @@ const BaseInput = React.forwardRef<HolderRef, BaseInputProps>((props, ref) => {
  element = (
  <GroupWrapperComponent className={mergedGroupClassName} ref={groupRef}>
  <WrapperComponent className={mergedWrapperClassName}>
- {addonBefore && (
+ {hasContent(addonBefore) && (
  <GroupAddonComponent className={addonCls}>
  {addonBefore}
  </GroupAddonComponent>
  )}
  {element}
- {addonAfter && (
+ {hasContent(addonAfter) && (
  <GroupAddonComponent className={addonCls}>
  {addonAfter}
  </GroupAddonComponent>

src/utils/commonUtils.ts

@@ -1,12 +1,18 @@
 import type React from 'react';
 import type { BaseInputProps, InputProps } from '../interface';
 
+export function hasContent(value: React.ReactNode) {
+ return !!value || value === 0;
+}
+
 export function hasAddon(props: BaseInputProps | InputProps) {
- return !!(props.addonBefore || props.addonAfter);
+ return hasContent(props.addonBefore) || hasContent(props.addonAfter);
 }
 
 export function hasPrefixSuffix(props: BaseInputProps | InputProps) {
- return !!(props.prefix || props.suffix || props.allowClear);
+ return (
+ hasContent(props.prefix) || hasContent(props.suffix) || !!props.allowClear
+ );
 }
 
 // TODO: It's better to use `Proxy` replace the `element.value`. But we still need support IE11.

tests/BaseInput.test.tsx

@@ -46,6 +46,45 @@ describe('BaseInput', () => {
  expect(container).toMatchSnapshot();
  });
 
+ it('should render numeric zero affixes and addons', () => {
+ const { container, rerender } = render(
+ <BaseInput
+ prefixCls="rc-input"
+ prefix={0}
+ suffix={0}
+ addonBefore={0}
+ addonAfter={0}
+ >
+ <input />
+ </BaseInput>,
+ );
+
+ expect(container.querySelector('.rc-input-prefix')).toHaveTextContent('0');
+ expect(container.querySelector('.rc-input-suffix')).toHaveTextContent('0');
+ expect(container.querySelectorAll('.rc-input-group-addon')).toHaveLength(2);
+ expect(
+ container.querySelector('.rc-input-group-wrapper'),
+ ).toHaveTextContent('0000');
+
+ rerender(
+ <BaseInput
+ prefixCls="rc-input"
+ prefix={null}
+ suffix={false}
+ addonAfter={false}
+ >
+ <input />
+ </BaseInput>,
+ );
+
+ expect(
+ container.querySelector('.rc-input-affix-wrapper'),
+ ).not.toBeInTheDocument();
+ expect(
+ container.querySelector('.rc-input-group-wrapper'),
+ ).not.toBeInTheDocument();
+ });
+
  describe('allowClear should work', () => {
  const onChange = jest.fn();
  const onBlur = jest.fn();