From 84af4a42a09fd89a9b4b6cc9b604e8a380fa933a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mart=C3=AD=20Malek?= Date: Fri, 6 Oct 2023 10:43:22 +0200 Subject: [PATCH] feat: make Input and Password refs point to obvious elements --- src/components/Input/InnerInput.tsx | 13 +++++++------ src/components/Input/Input.tsx | 2 +- src/components/Password/Password.tsx | 15 ++++++--------- 3 files changed, 14 insertions(+), 16 deletions(-) diff --git a/src/components/Input/InnerInput.tsx b/src/components/Input/InnerInput.tsx index ba271eaee..7e4dc32e8 100644 --- 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( +const InnerInput = forwardRef( (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(); const { label, onChange, size, id: providedId, variant, ...rest } = restProps; const id = useGeneratedId(providedId); + const innerRef = useRef(); + 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) => { setHasValue(event.target.value.length > 0); @@ -38,7 +39,7 @@ const InnerInput = forwardRef( ( +const Input = forwardRef( (props: InputWrapperProps & InputProps, ref) => { if (props.type === 'password') { return ; diff --git a/src/components/Password/Password.tsx b/src/components/Password/Password.tsx index 1ac91f94f..b2841ccc9 100644 --- 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( +const Password = forwardRef( ( { purpose = 'login', @@ -93,6 +93,9 @@ const Password = forwardRef( const { marginProps, restProps: withoutMargin } = extractWrapperMarginProps(rest); const { widthProps, restProps } = extractWidthProps(withoutMargin); + const inputRef = useRef(); + useImperativeHandle(ref, () => inputRef.current, []); + return ( ( 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}