Custom droplist not working - Unable to select from list box

#1

I’ve created a custom droplist using a text field, icon and list box from the default library. I open the list using the click or tap interaction, to toggle between the list’s visibility. When it’s set to visibile, there are no issue, yet when it’s set to hidden, It’s won’t select an option on click.Is this a bug? Is there a way around this?
image

#2

I think this is a general thing with the “Default:Form” widgets which get handled in the browser. The way I think of it is the browser can’t “see” these widgets when hidden (or disabled). You could try “Set Opacity” (to 0% or 100%) instead of the “Show/Hide” action. This makes the widget invisible to the user but still recognized by the browser UI handler.

#3

Let me make sure I understand how this is supposed to work:

  • your user clicks into the text field
  • when the text field is clicked, you show the list box
  • when the user selects an item from the list box, you change the text on the text field to the selected item in the list box.

Is that right? If so, you’ll want to make sure you’re using the “selection changed” event to hide the list box. If you’re just using click/tap, there’s no guarantee a selection will be made before the list box is hidden, and when the box is hidden, you can’t interact with it. Here’s an example.

Here’s the RP:
list-box-as-dropdown.rp (44.2 KB)

Without knowing more about your use case, I’d recommend using something other than list box for a custom dropdown. With list box, you don’t have a lot of control over the styling of elements, and I usually find that its main utility is in allowing multiple items to be selected.