(CDPE-6335) Move trailing button after input text field

puppetlabs · Mar 8, 2024 · 0819e14 · 0819e14
1 parent 042a5bf
commit 0819e14
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## react-components 5.34.1 (2024-03-08)
+
+- [Input] Bug fixing Input component element order
+
 ## data-grid 0.6.12 (2022-07-25)
 
 - [Table] Bug fixing table loader width on selectable tables (by [@Lukeaber](https://github.com/Lukeaber) in [#636](https://github.com/puppetlabs/design-system/pull/636))

diff --git a/packages/react-components/package-lock.json b/packages/react-components/package-lock.json
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@puppet/react-components",
-  "version": "5.34.0",
+  "version": "5.34.1",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "main": "build/library.js",

diff --git a/packages/react-components/source/react/library/input/Input.js b/packages/react-components/source/react/library/input/Input.js
@@ -165,7 +165,6 @@ const Input = ({
     >
       {icon && lIcon}
       {trailingIcon && tIcon}
-      {showTrailingButton && trailingButton}
       <Element
         id={name}
         name={name}
@@ -179,6 +178,7 @@ const Input = ({
         onChange={e => onChange(parseValue(e.target.value), e)}
         {...otherProps}
       />
+      {showTrailingButton && trailingButton}
     </div>
   );
 };

diff --git a/packages/react-components/test/input/input.js b/packages/react-components/test/input/input.js
@@ -147,4 +147,9 @@ describe('<Input />', () => {
 
     expect(onClick.called).to.equal(true);
   });
+
+  it('should render the trailing icon button after the input element if trailingButtonIcon is provided', () => {
+    const wrapper = shallow(<Input {...requiredProps} trailingButtonIcon="eye" /> );
+    expect(wrapper.find('div').children().last().is('Button')).to.equal(true);
+  }); 
 });