Input Fields Inside Dialog

[a-patel02]

Input fields inside dialogs stay focused until first key on dialog open, then lose focus and then stay in focus once reclicked.

Attaching video for example. As you can see I open dialog, it selects the input and then on the first key press it deselects it.

any fixes would be helpful,

thank you

Screen.Recording.2024-03-19.at.10.14.49.PM.mov

[pablotanner]

This likely has to do with how/where you are storing the input field states. Try placing them in the same component where you are also returning the modal. If you share the code I could be more exact

[Greyn1]

@a-patel02 Any update on this? Can u let me how did you resolve this? Facing a similar problem.

[Mastrangelis]

I had the same issue. The following did the trick

<DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
...
</DialogContent />

[pedroOrvalho]

Any updates on this?

@a-patel02 are you using Form as well?

im having the same issue but wonly happens if i use form inside the dialog. And input inside form.

If i dont use the form, just the input, i have not issue with focus

[MarceloGouveia77]

i got this same error, in my case the problem was:

i had this dynamic input inside my dialog:

{offersUuid.map((uuid, index) => (
          <Input
            key={index}
            onChange={(e) => {
              const value = e.target.value;
              setOffersUuid((prev) => {
                const newOffersUuid = [...prev];
                newOffersUuid[index] = value;
                return newOffersUuid;
              });
            }}
          />
        ))}

before, the key of input were "uuid", and every onClick event this uuid changed, causing the re-render on every input change, so i changed the key to index and solved.