Unable to apply dynamic 'disabled' styling to confirmationButtonProps

[coreymunn3]

I have what is most likely an edge case issue here but wanted to raise your attention to this use-case.

I am using the confirm component to show a message and a small form consisting of a single field for the user to add a comment. I am using the built-in Buttons in DialogActions to submit the form, and passing the form content via content prop. If the user has not entered a comment, I would like the confirm button to be disabled, so I tried passing disabled in confirmationButtonProps like so

confirmationButtonProps: {
        disabled: formValues.comment.length === 0
}
content: <ConfirmationContent formProps={{...formProps}} />

however, this does not work. The disabled prop does not update the confirmation button when the user begins typing. As a workaround, I could instead add my own form submit buttons, however since the handleConfirm function is not exposed I am not able to actually resolve the promise.

I was wondering if it would be possible to expose the handleConfirm and handleCancellation functions to enable this type of functionality. Or, if there are any other better way to accomplish what I am trying to do?

Thanks.

[jonatanklosko]

Hey @coreymunn3! The issue with the above is that the disabled option is computed just once, when you call the confirm function. I decided to keep this package simple and only handle basic confirmations. In use cases such as forms, it's better to have full control over the component. In this comment you can find an alternative solution I usually suggest, which allows you to render an arbitrary modal on the fly, while having full control over the modal contents :)