Hide WebListBox when it loses focus

Targets Web
1

Hi,

To reduce the number of database queries, I am using a WebSearchField to allow a user to type their query before submitting the search. The search results are then returned to a WebListBox with its visibility set to true. This then allows the user to select an option which is then written to a disabled WebTextField in a form.

The problem I have with the above is that I cannot figure out a way of hiding the WebListBox when it loses focus (there is no LostFocus event for WebListBox).

What I want to happen is when the WebListBox appears after the users submits their search, if the user clicks anywhere else on the page, the WebListBox should be hidden.

Anybody have any ideas how I can implement this?

2

How would the user get back to that WebListbox if they didn’t mean to click elsewhere? Do they have to repeat the search?

It seems like a UI design mistake to do that.

Maybe you should consider a dialog box instead?

1 Like
3

If you really want to implement this confusing UI, you could use the onmouseleave JavaScript event.

You can also use onclick with the webpage. If the click occurs outside of the WebListBox, then you can hide it.

But if you are not comfortable with JavaScript, perhaps you want to implement @Tom_Dixon 's suggestion instead.

4

Google does this, I wouldn’t call it confusing UI.

ScreenFlow

5

This is pretty common. I wouldn’t consider it confusing.

If you’re open to third-party solutions, or are already a GraffitiSuite Web Edition customer, GraffitiPopupMenu supports this type of search and select functionality.

1 Like
6

Thanks, this is exactly what I am looking for. Unfortunately, I am not currently open to third-party solutions just yet as I need something that works, without committing to additional expense. If in future we look to optimise UI, it may be an option. @Tom_Dixon 's solution looks like it might do the trick for now.

7

Good suggestion. I don’t imagine there being any issues when operating from a tablet browser i.e. the modal dialog displaying within the tablet screen size (unfortunately I don’t have a licence to test it from a tablet yet)?

8

I wouldn’t think so. You can always code to make sure the dialog box is a percentage of the browser Window size to insure the dialog box close button is visible if you use one. (I’ve done that for displaying dialogs of enlarged photos limiting the height and width to a max of 90% web page size) I sort of assume you will have a WebListbox cell click event to trigger something from the search result it holds.

This would not be a problem if the WebListbox had a lost focus event. It probably wouldn’t hurt to file an issue for having and losing focus on a WebListbox, for that matter for all the web controls would be a good idea.

1 Like
9

After Tim showed the Google example, I realized I am already using a similar scheme in my desktop apps.

Here is how you can implement click in the WebPage, from which you can hide the WebListbox.

  1. Add a 300 ms single timer, browser side, with the following code:
Sub Run() Handles Run
  dim js as string
  js = js + "var page=document.getElementById('" + self.ControlID +"');"
  js = js + "page.setAttribute('onclick', 'location.hash=""click"";');"
  self.ExecuteJavaScript(js)
End Sub

In Session, add the event “HashtagChanged”, containing :

Sub HashTagChanged(Name as String, Data as String) Handles HashTagChanged
  If Hashtag = "click" then
    'remove hashtag
    HashTag = ""
    'do whatever you need
    
  End If
End Sub

For the sake of simplicity, I used Hashtag to return the click to the program. If you feel inclined to learn about a more elaborate, although more complex way, see in the Xojo folder /Extras/WebSDK.

Note that the method can be used to add the click event to any control.

3 Likes