import React , { useEffect } from 'react' ; import { Input as PicassoInput , InputProps } from '@toptal/picasso' ; import FieldWrapper , { FieldProps } from '../FieldWrapper' ; export type FormInputProps = Omit < InputProps , 'onResetClick' > & { /** Callback invoked when reset button was clicked */ onResetClick ? : ( set : ( value : string ) => void ) => void ; } ; export type Props = FormInputProps & FieldProps < InputProps [ 'value' ] > ; const warnAutocompleteDisabledInput = ( name ? ) => { const autocompleteDisabled = name && /^(((field|input)(_|-)?\d+)|tan|otp|title|captcha)$/ . test ( name ) ; if ( autocompleteDisabled ) { console . warn ( `
In Chromium-based browsers, autocomplete might be disabled for input[name="${ name }"].
Known bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1255609
    ` ) ; } } ; export const Input = React . forwardRef < HTMLInputElement , Props > ( ( props , ref ) => { useEffect ( ( ) => { warnAutocompleteDisabledInput ( props . name ) ; } , [ props . name ] ) ; return ( < FieldWrapper < FormInputProps > { ... props } > { ( inputProps ) => < PicassoInput { ... inputProps } ref = { ref } / > } < /FieldWrapper>); } ) ; Input . defaultProps = { } ; Input . displayName = 'Input' ; export default Input ;