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

puppetlabs · Mar 7, 2024 · 02e09ac · 02e09ac
1 parent 042a5bf
commit 02e09ac
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
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);
+  }); 
 });