OnSelect is not OnFocus: Translucent Controls Use Case

This is again one of those minor annoyances of something that you'd assume will work this way that does not.  Clearly the PowerApps engine recognizes this event but doesn't really expose you to it in a way you might assume.

It is doing you a "favor" in creating a simple shortcut for when the control is "in focus" for the border thickness/color when a control is in focus, but you cannot catch and respond to an "OnFocus" event because it does not exist.  I hinted at this in an earlier post about Fixing Tab Order.

Therefore, while you can catch clicks into a control easily (e.g. OnSelect event) you cannot catch when the user uses the TAB key to arrive at a control.  In fact, you will also start punching yourself when you notice there also is no OnHover event to catch (although you can control border size/color similarly to above).

Creative Use Case: Translucent controls w/o focus

I ran smack into this (again) while I was thinking about a way to work around a question per changing the translucency of a control on focus.  Essentially, the person was asking if you could make the control partially translucent when not selected.

#1 has focus and #2 does not

You can make a text input partially translucent by altering one aspect of the Color and Fill (and optionally the BorderColor).

Let's say we have some local variable called focus that holds a number which represents which of our two controls has focus at that moment.  When the value is 1 we want our first control to be opaque and when it is not 1 we want it to be semi-translucent.  We can do this for field #2 above by altering the 4th item in an RGB value assigned to the properties above with the following:

• Color : RGBA(0, 0, 0, If(focus=2, 1, 20%))
• Fill: RGBA(255, 255, 255, If(focus=2, 1, 20%))

This actually works as you see above.  If we did made a similar change for field #1, then when the value is focus=1 then the first field is opaque and when the value is 2 then the second field is opaque (vice versa for translucent).

So what's the problem?

Well, how/where do you set the value of the variable focus?

You can set it during the OnSelect property for either of these controls and that works perfectly.  If click inside of each of these two text inputs as below then you'll get the following results:

• #1.OnSelect : UpdateContext({focus:1})
• #2.OnSelect : UpdateContext({focus:2})

It works!  But...

This all falls apart when you use TAB / ALT-TAB to move between the fields.  This is completely due to the fact that the OnSelect event doesn't fire when the control gets focus.

Now you might start thinking about ways around this (I certainly have considered a few).  The best way I thought one might do this is to actually catch the value of BorderWidth.  I mean, if the control has focus then the FocusedBorderWidth is likely different than the BorderWidth.  Therefore, if you could just get what value this control's border is at this exact moment then...everything falls apart.  Because you cannot do this.

The reasons behind this ultimately comes down (yet again) to PowerApps being designed around mobile vs. desktop.  There just isn't a "Tab" key on mobile so the user is always clicking on a control/field.

So for mobile apps?  This works fine.  However, the moment this application is opened on a desktop/laptop machine (even a Chromebook), there is the risk that the user will use the widely known Tab/Alt-Tab to navigate and ruin your pretty UI.

Final Thoughts

This definitely limits what you can do per creative UI items in that you cannot capture certain events that we all rather expect to be there.  Without OnFocus and OnHover, it is difficult to do a few things that most of us assume are possible.

Don't get me started on there not being the ability to have an OnSubmit for an input field (e.g. type in search information, press <Enter>, have "something" happen).