Modal visible when it shouldn't be

Hello,

I had an app with a table and a modal. My configuration was that when user doubleclicks in one of the table rows, a db query is triggered and on the success event of the query a modal shows:
image
image

This was working well. However I just put the table inside a tabs container. Didnt change anything else. And now the modal shows on page load. It shouldn't happen. I don't know why it's showing. I have this setting:

1 Like

The modal is still showing after user double clicks on table row. That's good. But now it's also showing on page load and I don't want that (because it's empty, its expected to show info related to the table row clicked)

Hello @juan.guerrero.gbn!

Hrmm... this is interesting since it is related to the nested component somehow.

Something you could try to do is change the Hidden property of the modal to check for data in the result of your query -- if the page is just loading the modal because of the table state in some way, this will ensure it stays hidden on page load. After that it should follow the event handlers you have setup.

Something like:

Hidden: {{ !getLatestCheckResults.data }}

or another property check on the table itself

Hidden: {{ tableName.data.length == 0 }}

Hey

Thanks for the reply!

I tried it, but unfortunately still the same.

It seems like the modal component is ignoring any condition set in Hidden and something is triggering the .show() function regardless.

Any other ideas?

I just found the problem.

I had duplicated the query that triggers the modal.show() function and that query is running on page load.

Thank you and sorry!

2 Likes