TextInput Component suddenly not working in production Laravel 10 Reactjs

Question

I got weird problem with TextInput Component from laravel reactjs.

I got the component from laravel breeze reactjs. The problem is I cant type anything on the <TextInput>, but if i change it to <input> tag it works fine. It was working fine till today suddenly <TextInput> stop working, I didnt change anything because it comes with laravel and it works fine in local development exactly same code except I didnt do npm run build on local.

I already did npm run build and restart ssr server, no luck.

Here is one of the TextInput from Login.jsx

> <TextInput
>    id="email"
>    type="email"
>    name="email"
>    value={data.email}
>    className="mt-1 block w-full"
>    autoComplete="username"
>    isFocused={true}
>    handleChange={onHandleChange}
> 
> />

If I change it to this input, it works

<input
    type="email"
    name="email"
    id="email"
    value={data.email}
    className={
    'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full'
    }
    autoComplete="username"
    required
    onChange={onHandleChange}
/>

It seems the component works again by making any changes to the component files, TextInput.jsx and CheckBox.jsx (was broken too). then run npm run build again.

Any idea what went wrong?

Answer 1

I was facing the same issue today and solve it changing ref in TextInput.jsx

from:

ref={localRef}

To:

ref={input}