Page MenuHomePhabricator

Counterintuitive behavior of DialogContainer.vue
Closed, ResolvedPublic

Description

If one uses the DialogContainer component with shouldClickToClose set to true – the default value – that setting can prevent the dialog from coming up, in cases where clicking a button or icon is meant to bring it up. The trouble is that Dialog.vue generates a close-dialog event even for the initial click that is meant to create the dialog. So that event tells DialogContainer to close the dialog that it just created (and it never becomes visible at all). This potentially could lead to considerable wasted debugging time.

The behavior can be improved by using the .stop qualifier where the click is detected, but this is non-obvious and can cause other limitations, as described in T315607.

First way to reproduce: In ZResponseEnvelope.vue, on the dialog-container element, change can-click-outside-to-close="false" to be true. Then load

http://localhost:8080/wiki/Special:EvaluateFunctionCall?view=zobject-editor.

Then select and run a function, so that the "Show Metrics" button appears. Then click on the button. The metadata dialog does not appear.

2nd way to reproduce: In TesterTableStatus.vue, on the cdx-icon element, remove the .stop qualifier from @click. Then load

http://localhost:8080/wiki/Z801?view=function-viewer

Then click the Details tab. Then click the info-icon for one of the testers. The metadata dialog does not appear.

Event Timeline

Just to clarify – the behavior of DialogContainer isn't necessarily broken. The main motivation for this ticket is to avoid wasted time by other developers who are using DialogContainer. It might be sufficient just to add a prominent comment about this behavior.