Fix #5440: InputText only print className once (#5441)

primefaces · Nov 28, 2023 · 8b149ca · 8b149ca
1 parent 05f9124
commit 8b149ca
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { KeyFilter } from '../keyfilter/KeyFilter';
 import { Tooltip } from '../tooltip/Tooltip';
-import { DomHandler, ObjectUtils, mergeProps } from '../utils/Utils';
+import { DomHandler, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { InputTextBase } from './InputTextBase';
 
 export const InputText = React.memo(
@@ -69,7 +69,7 @@ export const InputText = React.memo(
 
         const rootProps = mergeProps(
             {
-                className: cx('root', { isFilled }),
+                className: classNames(props.className, cx('root', { isFilled })),
                 onBeforeInput: onBeforeInput,
                 onInput: onInput,
                 onKeyDown: onKeyDown,

diff --git a/components/lib/inputtext/InputText.spec.js b/components/lib/inputtext/InputText.spec.js
@@ -31,6 +31,18 @@ describe('InputText', () => {
         expect(input).toHaveValue('');
         expect(container).toMatchSnapshot();
     });
+    test('when input has className only 1 className is printed', () => {
+        // Arrange
+        const { container } = render(<InputText className="jest" />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        fireEvent.input(input, { target: { value: 'jest' } });
+
+        // Act
+        expect(container).toMatchSnapshot();
+        expect(input).toHaveValue('jest');
+    });
     test('when input is is set for validation only', () => {
         // Arrange
         const { container } = render(<InputText validateOnly keyfilter={`alpha`} />);

diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
@@ -17,15 +17,16 @@ export const InputTextBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'InputText',
         __parentMetadata: null,
+        children: undefined,
+        className: null,
         keyfilter: null,
-        validateOnly: false,
-        tooltip: null,
-        tooltipOptions: null,
         onBeforeInput: null,
         onInput: null,
         onKeyDown: null,
         onPaste: null,
-        children: undefined
+        tooltip: null,
+        tooltipOptions: null,
+        validateOnly: false
     },
 
     css: {

diff --git a/components/lib/inputtext/__snapshots__/InputText.spec.js.snap b/components/lib/inputtext/__snapshots__/InputText.spec.js.snap
@@ -1,5 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InputText when input has className only 1 className is printed 1`] = `
+<div>
+  <input
+    class="jest p-inputtext p-component p-filled"
+    data-pc-name="inputtext"
+    data-pc-section="root"
+  />
+</div>
+`;
+
 exports[`InputText when input is blank it should not have filled state 1`] = `
 <div>
   <input