How does OnLostFocus work?

Axure RP 8
1

CONTEXT. I have a button that triggers a drop down list. The button has 2 states: normal (the list is hidden) and pressed (the list is shown and the button changes color). When the button is clicked it changes state and shows or hides the drop down list. When an item from the list is clicked the button returns to the normal state and the list is hidden. The same behavior should happen when clicking outside the button or the list.

PROBLEM. If I show the list as a lightbox then clicking outside the list hides it. What it does not do is return the button to its normal state. At first I added a script in the list, so that when OnLostFocus the list is hidden and the button is set to the normal state, but it does no seem to work. I have read in a post in this forum that the focus only works on widgets such as text field and radio buttons, not on groups or rectangles. I tried adding a text field and set focus on it when the list is dropped down, but now the script for the OnClick of the items of the list is not executing, so I cannot select any of the items of the list.

QUESTION. How does the mechanism of the OnLostFocus exactly work? I had to insert a wait time in the action of clicking the button before setting focus on the text field to make it work, so I am guessing that there are some actions that take place before others. I tried placing waiting times in different places but it does not work, so it would be better to understand what is happening. What happens when I click something and something has an OnLostFocus script, what executes first and what does not execute?

EXAMPLE. Here an example with the 2 cases, using a lightbox that gets stuck in the pressed state when clicked outside the component, the other using a hidden textfield (1px wide and casted by the list when dropped down) that does not allow to select any of the elements of the list:
https://jtrxhf.axshare.com/#g=3&p=dropdown_button

Layout.rp (752.9 KB)

NOTE. Although I talk about the button having 2 states, in reality what I do is have 2 overlapping buttons and toggle their visibility when the button is pressed.

2

one way is to try and put a onhide toggle (your buttons), on your menu(group).
The other thing you might have to change is when klicked an option, the wait time makes it go back to original button and THEN showing pressed state and option selected. But maybe thats easier to fix than this previous issue?

/Z

3

Thanks Zariel. That did the trick: in the lightbox case I now hide the pressed button and show the normal button for the onHide of the drop down list. I had never used this clause before so I was unaware of its existence, but it is a nice discovery as it can be handy for other situations.

The doubt on how the OnLostFocus, works remains, but at least my problem is solved, so I am happy with this solution.

4

Hi, @j.sanchez

The actions set on a widget to occur with an OnLostFocus interaction will take place as soon as the widget loses focus, i.e., when clicking any other widget/element on the page/prototype or moving to another element/widget with the Tab key.

5

Thanks Mauricio. You are right about what you say, but when you have a chain reaction of triggering actions it is not very intuitive what happens in the background. In my case, I have a button that when clicked tiggers an action to set focus on a textfield, and when that textfield loses focus another action is triggered. There seems to be a race in these situations, if the focus is lost because of clicking in another component, and the clicking is as well triggering an action, then it looks like the clicking action never takes place, only the action triggered by the lost of focus is executed, so you need to put a wait to make suppress the competition, although in my case I was not able to figure out where

Nah, it is easy to get lost in this explanation, so nothing to worry about, but I just put the word out there to be cautious with these chain reactions.