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 />

[erikwibowo]

this is not working

[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.

[devthub]

Same here. Is anyone has a workaround?

[unclebay143]

Placing your form outside the dialog component should resolve the issue. If your input triggers a re-render, the problem will persist.

[pedroOrvalho]

That's not really a solution. Just a concession

[unclebay143]

But it sure unblocks, got a solution @pedroOrvalho?

[SpBills]

I am running into a similar problem, so I'll put it here for documentation purposes. We have a form inside of a dialog, and every time we do a tab event (even with tabindex="-1" on the dialog container) the form regularly steals our focus.

[dmausttruefit]

@SpBills I am curious if you ever found a solution to this?

[SpBills]

Sadly not. We're just doing a redesign for the client. They are not happy with losing their tab ability, so this is a better solution.