# Select from dropdown by pressing enter

**URL:** <https://forum.inductiveautomation.com/t/select-from-dropdown-by-pressing-enter/103139>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [March 3, 2025, 12:55pm UTC](https://forum.inductiveautomation.com/t/select-from-dropdown-by-pressing-enter/103139 "2025-03-03T12:55:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![manuele.longhi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/manuele.longhi/32/51470_2.png) [@manuele.longhi](https://forum.inductiveautomation.com/u/manuele.longhi)\
**Post date:** [March 3, 2025, 12:55pm UTC](https://forum.inductiveautomation.com/t/select-from-dropdown-by-pressing-enter/103139/1 "2025-03-03T12:55:40Z")

</div>

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)

```python
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

---

<div class="post-metadata">

**Author:** ![mircea.diaconu](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@mircea.diaconu](https://forum.inductiveautomation.com/u/mircea.diaconu)\
**Post date:** [March 10, 2025, 8:50pm UTC](https://forum.inductiveautomation.com/t/select-from-dropdown-by-pressing-enter/103139/2 "2025-03-10T20:50:07Z")

</div>

I have a very similar issue, on V8.1.45. We updated the server last week (from V8.1.17). what version are you running?

---

<div class="post-metadata">

**Author:** ![manuele.longhi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/manuele.longhi/32/51470_2.png) [@manuele.longhi](https://forum.inductiveautomation.com/u/manuele.longhi)\
**Post date:** [March 11, 2025, 6:13am UTC](https://forum.inductiveautomation.com/t/select-from-dropdown-by-pressing-enter/103139/3 "2025-03-11T06:13:39Z")

</div>

I have the 8.1.45.

Are you saying that the issue appeared after you upgraded the servers?

---

<div class="post-metadata">

**Author:** ![mircea.diaconu](https://avatars.discourse-cdn.com/v4/letter/m/ea666f/32.png) [@mircea.diaconu](https://forum.inductiveautomation.com/u/mircea.diaconu)\
**Post date:** [March 11, 2025, 12:22pm UTC](https://forum.inductiveautomation.com/t/select-from-dropdown-by-pressing-enter/103139/4 "2025-03-11T12:22:31Z")

</div>

Yes, on 8.1.17, the filthening and selecting on Enter it was working fine, but the issue is 8.1.45.

---

<div class="post-metadata">

**Author:** ![jfogt](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jfogt/32/76986_2.png) [@jfogt](https://forum.inductiveautomation.com/u/jfogt)\
**Post date:** [July 1, 2025, 3:40pm UTC](https://forum.inductiveautomation.com/t/select-from-dropdown-by-pressing-enter/103139/5 "2025-07-01T15:40:02Z")

</div>

Hello,

I was having the same issue and created a fix that allows users to press **Enter** and select the top option in the list. It is a little lengthy, but not completely impractical if the **Enter** functionality is a must.

 ![Dropdown.props](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/de7d7dbcb8c71de01f4e46a54a02b887e0ede500.png)

I first bound a newly created `options_trimmed` to my dropdown `options`. The expression filters the dataset using the `this.props.search.searchparam`, matching by leading text in this case. The `view()` expression comes from @pturmel's Integration Toolkit.

 ![options_trimmed expression binding](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/9/29c087d69750140542d25c8bd2693b8f48ec1994.png)

Then I created a custom property, `dd1options`, that is bound to the top value in the `options_trimmed` dataset. Inspiration comes from this [post](https://forum.inductiveautomation.com/t/perspective-dropdown-how-to-default-to-the-first-value/75285/3?).

 ![dd1options binding](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c17e40b7393e3e6fc4e84062b4f1982d6c43a01e.png)

After that, I just configured a new **onKeyDown** script for the Dropdown component, leaving **Prevent Default** unchecked.

```python
# if enter is pressed the top result will be selected
	if event.key == 'Enter':
		self.props.value = self.custom.dd1options
		self.focus()

```

I'm sure this is not the best or most efficient method but figured I should put it out there for anybody interested.

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [July 1, 2025, 3:52pm UTC](https://forum.inductiveautomation.com/t/select-from-dropdown-by-pressing-enter/103139/6 "2025-07-01T15:52:06Z")

</div>

Nowadays, I only recommend the `view()` function for PIVOT operations. I'd use the following in place of the expression you show:

```python
transform(
	lower({this.props.search.searchParam}),
	where(
		{this.props.options},
		value() = left(it()['label'], len(value()))
	)
)

```

---

<div class="post-metadata">

**Author:** ![manuele.longhi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/manuele.longhi/32/51470_2.png) [@manuele.longhi](https://forum.inductiveautomation.com/u/manuele.longhi)\
**Post date:** [July 7, 2025, 5:13am UTC](https://forum.inductiveautomation.com/t/select-from-dropdown-by-pressing-enter/103139/7 "2025-07-07T05:13:31Z")

</div>

Thanks, that did it!