Controlled input as content not updating state until dialog is closed

[federicofrontera]

I have a confirmation dialog where I need the user to input an optional text value before confirming. My use of confirm looks something like this:

confirm( {content: <TextField defaultValue="" onChange=((e) => setValue(e.target.value)})
.then(() => APICall(value))
.catch(() => {})

And the issue is the value is not actually updated until the dialog is closed, so the value being used is always the previous one.

I'm not sure if there's something I'm doing wrong or maybe this tool is meant for simpler dialogs where it's only a description and an confirm/cancel button.

Thanks for your time.

[jonatanklosko]

Sorry for the late reply, I missed this. If that's still relevant, you're adding the then callback immediately, so the current value is captured by the () => APICall(value) closure. You could probably work around this by using useRef() and always referring to the latest value in then :)

[Bonfims]

im using useRef but current still with undefined when then is called.

I guess that when then is called, my input field component no longer exists and their ref value will be null...

[jonatanklosko]

Hm, this is surprising, but for inputs you may want to use a more flexible approach. See #69 (comment).