Enhance your input fields with wait logic

interface IProps extends OutlinedTextFieldProps {  
waitForInput: boolean
}
const { waitForInput, ...inputProps } = props
const [waitEvent, setWaitEvent] = useState<React.ChangeEvent<HTMLInputElement>>(null)
useEffect(() => {  let timer = 0  if (waitEvent && waitForInput) {    timer = setTimeout(() => inputProps.onChange(waitEvent), 1000)  }  return () => clearTimeout(timer)}, [waitEvent])
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {  if (waitForInput) {    event.persist() <- only for React 16 and earlier    setWaitEvent(event)  } else {    inputProps.onChange(event)  }}
return <TextField {...inputProps} onChange={onChange} />
<ExtendedInput

waitForInput
variant="outlined" label="Extended Input" onChange={(e) => alert(e.target.value)}/>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store