feat: make Input and Password refs point to obvious elements

freenowtech · Oct 6, 2023 · 84af4a4 · 84af4a4
1 parent 9fcdbf6
commit 84af4a4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/src/components/Input/InnerInput.tsx b/src/components/Input/InnerInput.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { extractClassNameProps, extractWidthProps, extractWrapperMarginProps } from '../../utils/extractProps';
 import { useGeneratedId } from '../../utils/hooks/useGeneratedId';
 import { BottomLinedInput } from './BottomLinedInput';
@@ -8,19 +8,20 @@ import { BoxedInputLabel } from './BoxedInputLabel';
 import { InputProps } from './InputProps';
 import { InputWrapper, InputWrapperProps } from './InputWrapper';
 
-const InnerInput = forwardRef<HTMLDivElement, InputWrapperProps & InputProps>(
+const InnerInput = forwardRef<HTMLInputElement, InputWrapperProps & InputProps>(
     (props: InputWrapperProps & InputProps, ref) => {
         const { classNameProps, restProps: withoutClassName } = extractClassNameProps(props);
         const { marginProps, restProps: withoutMargin } = extractWrapperMarginProps(withoutClassName);
         const { widthProps, restProps } = extractWidthProps(withoutMargin);
-        // TODO replace with ref when implementing https://github.com/freenowtech/wave/issues/169
-        const inputRef = useRef<HTMLInputElement>();
 
         const { label, onChange, size, id: providedId, variant, ...rest } = restProps;
         const id = useGeneratedId(providedId);
 
+        const innerRef = useRef<HTMLInputElement>();
+        useImperativeHandle(ref, () => innerRef.current, []);
+
         const [hasValue, setHasValue] = useState(rest?.value?.toString().length > 0);
-        const hasUncontrolledValue = inputRef?.current?.value?.length > 0;
+        const hasUncontrolledValue = innerRef?.current?.value?.length > 0;
 
         const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
             setHasValue(event.target.value.length > 0);
@@ -38,7 +39,7 @@ const InnerInput = forwardRef<HTMLDivElement, InputWrapperProps & InputProps>(
                 <InputWrapper ref={ref} {...classNameProps} {...marginProps} {...widthProps}>
                     <BoxedInput
                         {...rest}
-                        ref={inputRef}
+                        ref={innerRef}
                         variant={variant}
                         id={id}
                         size={size}

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -5,7 +5,7 @@ import { InputProps } from './InputProps';
 import { InputWrapperProps } from './InputWrapper';
 import { InnerInput } from './InnerInput';
 
-const Input = forwardRef<HTMLDivElement, InputWrapperProps & InputProps>(
+const Input = forwardRef<HTMLInputElement, InputWrapperProps & InputProps>(
     (props: InputWrapperProps & InputProps, ref) => {
         if (props.type === 'password') {
             return <Password {...props} ref={ref} />;

diff --git a/src/components/Password/Password.tsx b/src/components/Password/Password.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { compose, margin, MarginProps, width, WidthProps } from 'styled-system';
@@ -69,7 +69,7 @@ declare module 'csstype' {
     }
 }
 
-const Password = forwardRef<HTMLDivElement, PasswordProps>(
+const Password = forwardRef<HTMLInputElement, PasswordProps>(
     (
         {
             purpose = 'login',
@@ -93,6 +93,9 @@ const Password = forwardRef<HTMLDivElement, PasswordProps>(
         const { marginProps, restProps: withoutMargin } = extractWrapperMarginProps(rest);
         const { widthProps, restProps } = extractWidthProps(withoutMargin);
 
+        const inputRef = useRef<HTMLInputElement>();
+        useImperativeHandle(ref, () => inputRef.current, []);
+
         return (
             <PasswordWrapper {...widthProps} {...marginProps}>
                 <Input
@@ -115,13 +118,7 @@ const Password = forwardRef<HTMLDivElement, PasswordProps>(
                             type="button"
                             onClick={() => {
                                 setIsHidden(prevValue => !prevValue);
-
-                                // TODO use ref passed to the input once https://github.com/freenowtech/wave/issues/169 is solved
-                                // set input focus
-                                const inputElement: HTMLElement = document.querySelector(`input[id=${inputId}]`);
-                                if (inputElement) {
-                                    inputElement.focus();
-                                }
+                                inputRef?.current.focus();
                             }}
                             aria-controls={inputId}
                             aria-label={isHidden ? aria.showPasswordButton : aria.hidePasswordButton}