diff --git a/src/Input.tsx b/src/Input.tsx index 1e5fa14..6bd0c0f 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -1,5 +1,10 @@ import { clsx } from 'clsx'; -import { omit, triggerFocus, type InputFocusOptions } from '@rc-component/util'; +import { + isReactRenderable, + omit, + triggerFocus, + type InputFocusOptions, +} from '@rc-component/util'; import React, { forwardRef, useEffect, @@ -236,7 +241,7 @@ const Input = forwardRef((props, ref) => { const getSuffix = () => { // Max length value - if (suffix || countConfig.show) { + if (isReactRenderable(suffix) || countConfig.show) { return ( <> {countConfig.show && ( @@ -244,7 +249,8 @@ const Input = forwardRef((props, ref) => { className={clsx( `${prefixCls}-show-count-suffix`, { - [`${prefixCls}-show-count-has-suffix`]: !!suffix, + [`${prefixCls}-show-count-has-suffix`]: + isReactRenderable(suffix), }, classNames?.count, )} diff --git a/tests/renderability.test.tsx b/tests/renderability.test.tsx new file mode 100644 index 0000000..950d0c8 --- /dev/null +++ b/tests/renderability.test.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import Input from '../src'; + +describe('suffix renderability', () => { + it('renders zero and applies the count suffix class', () => { + const { container, rerender } = render(); + expect(container.querySelector('.rc-input-suffix')).toHaveTextContent('0'); + rerender(); + expect( + container.querySelector('.rc-input-show-count-has-suffix'), + ).toBeTruthy(); + }); + + it.each([null, undefined, false, ''])( + 'does not wrap an empty suffix %s', + (suffix) => { + const { container } = render(); + expect(container.querySelector('.rc-input-suffix')).toBeNull(); + }, + ); +});