Modal's "Open Event" not triggering when its opened with JS

I have a modal that pops up depending on the result of a query. That modal has an event handler that triggers a script when it gets opened. If I click the modal's button to open it the event works as expected, but when the query triggers the .open() function the modal opens but the event doesn't get handled.

Hi @Tech_Hallo :wave: Thanks for reaching out with this report! I've been able to successfully reproduce this behavior within my own environment, so I'll be filing an internal bug ticket requesting that this functionality be addressed :grinning_face_with_smiling_eyes: I'll let you know via this thread if there are any updates to the internal ticket, but please don't hesitate to let us know if you have any other related questions in the meantime too!

@luke-phillippi I appear to have a similar issue with the .close() function.

I have:

  • A modal containing a form
  • An event handler on the modal that resets the form when the modal is closed
  • A query with an event handler that closes the modal after success

When I close the modal manually the form is reset. However, when the modal is programatically closed (after a successful query) the form is not reset.

Reset the form first and then close the modal is my 2 cents

Hey @crhayes!

Thanks for surfacing this, I'll add it to the report! In the meantime, would Scotts suggestion work here?

Hey Chris, yes, this is what I am currently doing. Any code that programmatically closes a modal also programatically clears any embedded forms.

This works fine, though it would be preferred to simply programatically close the modal and have the modal close event and then trigger the form to be cleared.

Hi @Tech_Hallo, @ScottR, and @crhayes!

We've added this forward compatible option to modal component event handlers to support this as of v2.89:

2 Likes