Hi all,
I have a page with a dropdown menu where users can type to filter and select an item. However, users have reported an issue (that is more of a quality of life than a bug): when they start typing in the dropdown, the menu filters out undesired items (as expected); however, once the desired item appears at the top of the list, if they press Enter, the wrong item is selected (not the one at the top of the list). Upon further investigation, I discovered that the item that is selected this way is always the very first (before any filtering takes place).
I know that pressing the Down Arrow key and then pressing Enter selects the correct item. However, I'm wondering if there is a way to modify the behavior so that the user can select the correct item (which appears at the top after typing) without having to press the Down Arrow first (users specifically told me that this behavior is quite annoying).
I tried the DIY solution by definig a script in the onKeyDown event, but it doesn't really seem to work perfectly. For reference this is the test code that I put in the onKeyDown event (making sure that the Prevent Default option is checked)
options = self.view.params.options
# Each option has the structure
# {'name': 'optionName', 'id': 'optionId'}
# The options in the dropdown are calculated based on these options,
# changing "name" into "label" and "id" into "value"
selectionFilter = self.view.custom.filter
# This has a bidirectional binding with the props.search.searchParam property of the Dropdown
selectedItem = self.view.params.selected
# This has a bidirectional binding with the props.value property of the Dropdown
possibleKeys = 'abcdefghijklmnopqrstuvz0123456789-.,:;'
if event['key'] == 'Enter':
filtered = filter(lambda o: selectionFilter in o['name'], options)
selectedItem = filtered[0] if filtered else None
elif event['key'].lower() in possibleKeys:
selectionFilter += str(event['key'])
The result is that, even though the property view.custom.filter seems to be correctly evaluated, the dropdown does not show any indication of the filtering.
Is there a way I can do this (possibly without overriding the onKeyDown)?
Thanks