Disable your active OnSelect controls when showing a dialog

This is perhaps one of the most strange blog post titles I came up with but I found it quite difficult to find the rights words. A bit more explanation is thus needed. I created an example canvas app and video for a better explanation and proof.

An active OnSelect control is a control that has logic (code) in its property OnSelect other than:

false

Showing a dialog is a feature of many canvas apps. Such a dialog often consists of several controls. The starting control is a container which spans the whole screen. Its property Visible is determined with a variable and its property Fill is a semi-transparent color. The container is put highest in the control hierarchy so that when the dialog is shown, people cannot click on the controls “under” this container.

But this is actually not true!

Ok, Ok. Not being able to click on them is true, but there is still a way to run the logic (code) on their property OnSelect. And that is what matters.

Beware of the keyboard!

Showing a dialog does not prevent people to use the keyboard and in this case I specifically mean the Tab-key and Enter-key. So if your screen has for instance multiple buttons and a dialog is shown, people can still navigate to these buttons using the Tab-key and run the code in their property OnSelect by using the Enter-key.

The easiest way to deal with this situation is to set a variable every time you display a dialog and use that variable to disable all active OnSelect controls using their property DisplayMode. For example like this:

If(
    var_ShowDialog,
    DisplayMode.Disabled,
    DisplayMode.Edit
)

A video in support of this blog post can be viewed here.