My input component deselects when typing

[strong panther]

I've created an component that returns an input

const SimpleField = ({ placeholder, id, type }: { placeholder: string; id: string; type: string }) => {
        return(
            <input type={type} placeholder={placeholder} id={id} onChange={handleInputChange} value={formData[id]}/>
        )
    }

But everytime I type something in, it loses focus (Deselects). The input is correctly registered and I can continue writing clicking between each letter.

This is my handleInputChange function:

const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        e.persist();
        const { id, value } = e.target;
        setFormData({
            ...formData,
            [id]: value,
        });
    };

Any explanation would be very appreciated 😄

[worn bridge]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[twin ferry]

remove the value part in input because i think that recreates the input thing every change (thus deselect), you can use defaultValue if you want to preload some state tho

[strong panther]

I've already tried using defaultValue and removing value at all. Also when working with normal inputs (not react components) it works just fine

I also think that it recreates the input every time, but I'm struggling to find a solution

[twin ferry]

really random idea, can you try adding the key prop and making it a string of anything and see if it stays then

[strong panther]

Didn't work 😔

[twin ferry]

😭

can you share more code on where this is defined and used maybe

you might also be able to scam .focus()

[strong panther]

This is the basic structure

// app/home/page.tsx
export default function Home(){
  // returns the page... and
  <CreateClientForm></CreateClientForm>
}

// app/components/newClient.tsx

const CreateClientForm = () => {
  handleInputChange(){...}
  SimpleField(props){...}
  // More code 
  
  return ({
    <div>
      <form>
        <SimpleField></SimpleField>
    //...
  })
}

[strong panther]

Where should I use it?

[twin ferry]

im just looking at it right now and i can't seem to be able to abuse 😭

[strong panther]

In the handleInputChange?

😢

don't understand

[twin ferry]

yeah that is what i thought

but it seems like as it recreates everything it can't seem to be easy

i was trying to think using the id and documentgetelementbyid but that didn't seem to work

[strong panther]

Why does it even recreate the input component instead of updating it? Like regular html would do

[strong panther]

The solution was to declare the SimpleField component outside the main CreateClientForm because it re-renders the main component (i guess)

[twin ferry]

oh that makes sense, but ahhhh