fix(react): add forward ref to PasswordInput component

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -5036,6 +5036,7 @@ Map {
       "render": [Function],
     },
     "PasswordInput": Object {
+      "$$typeof": Symbol(react.forward_ref),
       "defaultProps": Object {
         "className": "\${prefix}--text__input",
         "disabled": false,
@@ -5143,6 +5144,7 @@ Map {
           "type": "oneOfType",
         },
       },
+      "render": [Function],
     },
     "defaultProps": Object {
       "disabled": false,

packages/react/src/components/TextInput/PasswordInput-test.js

@@ -26,6 +26,37 @@ describe('PasswordInput', () => {
         expect(passwordInput().length).toBe(1);
       });
 
+      it('should accept refs', () => {
+        class MyComponent extends React.Component {
+          constructor(props) {
+            super(props);
+            this.passwordInput = React.createRef();
+            this.focus = this.focus.bind(this);
+          }
+          focus() {
+            this.passwordInput.current.focus();
+          }
+          render() {
+            return (
+              <PasswordInput
+                id="test"
+                labelText="testlabel"
+                ref={this.passwordInput}
+              />
+            );
+          }
+        }
+        const container = document.createElement('div');
+        container.id = 'container';
+        document.body.appendChild(container);
+        const wrapper = mount(<MyComponent />, {
+          attachTo: document.querySelector('#container'),
+        });
+        expect(document.activeElement.type).toBeUndefined();
+        wrapper.instance().focus();
+        expect(document.activeElement.type).toEqual('password');
+      });
+
       it('has the expected classes', () => {
         expect(passwordInput().hasClass(`${prefix}--text-input`)).toEqual(true);
       });

packages/react/src/components/TextInput/PasswordInput.js

@@ -7,25 +7,28 @@ import { textInputProps } from './util';
 
 const { prefix } = settings;
 
-export default function PasswordInput({
-  labelText,
-  className,
-  id,
-  placeholder,
-  onChange,
-  onClick,
-  hideLabel,
-  invalid,
-  invalidText,
-  helperText,
-  light,
-  tooltipPosition = 'bottom',
-  tooltipAlignment = 'center',
-  hidePasswordLabel = 'Hide password',
-  showPasswordLabel = 'Show password',
-  size,
-  ...other
-}) {
+const PasswordInput = React.forwardRef(function PasswordInput(
+  {
+    labelText,
+    className,
+    id,
+    placeholder,
+    onChange,
+    onClick,
+    hideLabel,
+    invalid,
+    invalidText,
+    helperText,
+    light,
+    tooltipPosition = 'bottom',
+    tooltipAlignment = 'center',
+    hidePasswordLabel = 'Hide password',
+    showPasswordLabel = 'Show password',
+    size,
+    ...other
+  },
+  ref
+) {
   const [inputType, setInputType] = useState('password');
   const togglePasswordVisibility = () =>
     setInputType(inputType === 'password' ? 'text' : 'password');
@@ -55,6 +58,7 @@ export default function PasswordInput({
     placeholder,
     type: inputType,
     className: textInputClasses,
+    ref,
     ...other,
   };
   const labelClasses = classNames(`${prefix}--label`, {
@@ -127,7 +131,7 @@ export default function PasswordInput({
       {error}
     </div>
   );
-}
+});
 
 PasswordInput.propTypes = {
   /**
@@ -243,3 +247,5 @@ PasswordInput.defaultProps = {
   light: false,
   size: '',
 };
+
+export default PasswordInput;

packages/react/src/components/TextInput/TextInput-story.js

@@ -25,23 +25,26 @@ const sizes = {
   'Small size (sm)': 'sm',
 };
 
-function ControlledPasswordInputApp(props) {
-  const [type, setType] = useState('password');
-  const togglePasswordVisibility = () => {
-    setType(type === 'password' ? 'text' : 'password');
-  };
-  return (
-    <>
-      <TextInput.ControlledPasswordInput
-        type={type}
-        togglePasswordVisibility={togglePasswordVisibility}
-        {...props}
-      />
-      <button onClick={() => setType('text')}>Show password</button>
-      <button onClick={() => setType('password')}>Hide password</button>
-    </>
-  );
-}
+const ControlledPasswordInputApp = React.forwardRef(
+  function ControlledPasswordInputApp(props, ref) {
+    const [type, setType] = useState('password');
+    const togglePasswordVisibility = () => {
+      setType(type === 'password' ? 'text' : 'password');
+    };
+    return (
+      <>
+        <TextInput.ControlledPasswordInput
+          type={type}
+          togglePasswordVisibility={togglePasswordVisibility}
+          ref={ref}
+          {...props}
+        />
+        <button onClick={() => setType('text')}>Show password</button>
+        <button onClick={() => setType('password')}>Hide password</button>
+      </>
+    );
+  }
+);
 
 const props = {
   TextInputProps: () => ({