fix: forward ref directly and use the new autoFocus field

Author: naftis

packages/components/src/DateField/DateField.tsx

@@ -10,7 +10,7 @@
  */
 import React, { useState, useRef, useEffect } from 'react'
 import styled from 'styled-components'
-import { ITextInputProps, TextInput, IRef } from '../TextInput/TextInput'
+import { ITextInputProps, TextInput } from '../TextInput/TextInput'
 import { InputLabel } from '../InputField/InputLabel'
 
 const DateWrapper = styled.div`
@@ -55,9 +55,9 @@ export const DateField = ({
   ...props
 }: IDateFieldProps) => {
   const [date, setDate] = useState<IState>({ yyyy: '', mm: '', dd: '' })
-  const ddRef = useRef<IRef>(null)
-  const mmRef = useRef<IRef>(null)
-  const yyyyRef = useRef<IRef>(null)
+  const ddRef = useRef<HTMLInputElement>(null)
+  const mmRef = useRef<HTMLInputElement>(null)
+  const yyyyRef = useRef<HTMLInputElement>(null)
   const { dd, mm, yyyy } = date
 
   useEffect(() => {
@@ -82,15 +82,15 @@ export const DateField = ({
             return
           }
           if (val.length > 1 && mmRef.current) {
-            mmRef.current.focusField()
+            mmRef.current.focus()
           }
           break
         case 'mm':
           if (val.length > 2 || Number(val) > MAX_MONTH_NUMBER) {
             return
           }
           if (val.length > 1 && yyyyRef.current) {
-            yyyyRef.current.focusField()
+            yyyyRef.current.focus()
           }
           break
         case 'yyyy':

packages/components/src/TextInput/TextInput.tsx

@@ -112,11 +112,7 @@ const StyledInput = styled.input<ICustomProps>`
   }
 `
 
-export interface IRef {
-  focusField: () => void
-}
-
-export const TextInput = React.forwardRef<IRef, ITextInputProps>(
+export const TextInput = React.forwardRef<HTMLInputElement, ITextInputProps>(
   (
     {
       focusInput,
@@ -130,31 +126,6 @@ export const TextInput = React.forwardRef<IRef, ITextInputProps>(
     },
     ref
   ) => {
-    const $element = React.useRef<HTMLInputElement>(null)
-
-    function focusField(): void {
-      /*
-       * Needs to be run on the next tick
-       * so that 'value' prop has enough time to flow back here
-       * if the focusInput prop is called right after keydown
-       */
-      setTimeout(() => {
-        if ($element.current) {
-          $element.current.focus()
-        }
-      })
-    }
-
-    React.useImperativeHandle(ref, () => ({
-      focusField
-    }))
-
-    React.useEffect(() => {
-      if (focusInput) {
-        focusField()
-      }
-    }, [focusInput])
-
     return (
       <StyledInputContainer
         touched={otherProps.touched}
@@ -163,7 +134,8 @@ export const TextInput = React.forwardRef<IRef, ITextInputProps>(
       >
         {prefix && <StyledPrefix>{prefix}</StyledPrefix>}
         <StyledInput
-          ref={$element}
+          ref={ref}
+          autoFocus={focusInput}
           name={otherProps.id}
           {...otherProps}
           autoComplete={

packages/components/src/TimeField/TimeField.tsx

@@ -10,7 +10,7 @@
  */
 import * as React from 'react'
 import styled from 'styled-components'
-import { ITextInputProps, IRef, TextInput } from '../TextInput/TextInput'
+import { ITextInputProps, TextInput } from '../TextInput/TextInput'
 
 export interface IProps {
   id: string
@@ -103,15 +103,15 @@ export function TimeField(props: ITimeFieldProps) {
     }
   }, [props.value])
 
-  const hh = React.useRef<IRef>(null)
-  const mm = React.useRef<IRef>(null)
+  const hh = React.useRef<HTMLInputElement>(null)
+  const mm = React.useRef<HTMLInputElement>(null)
 
   function change(event: React.ChangeEvent<HTMLInputElement>) {
     const val = event.target.value
     if (event.target.id.includes('hh')) {
       if (Number(val) < 0 || Number(val) > 23) return
       if (val.length === 2 && mm?.current !== null) {
-        mm.current.focusField()
+        mm.current.focus()
       }
       setState((state) => ({ ...state, hh: val }))
     } else if (event.target.id.includes('mm')) {