Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Combobox and Select Component Enter Key Events

ZacDAug 19 2019 — edited Aug 21 2019

Our JET 6.0 app has several screens that have a region with search fields, a button to execute the search, and a table to display the results.  Something we've tried to do on most of these screens is to allow the Enter key to be used to execute the search when the user has focus in any of the search fields.  To accomplish this, we have a keyUp listener attached to the oj-form-layout component that wraps the search fields.  When the listener activates on Enter-key pressed, we trigger the click event on the button.  This works well for oj-input-text and oj-checkboxset components, but unreliably for other input components.

Of particular interest are the combobox and select components.  While working with these components, I found some inconsistent and undesirable behaviors.  These components have functionality tied to the Enter key, which makes trying to tie into that event difficult for me.  I don't want to search if the user is using Enter to select a choice from the list, but if the selection popup is not rendered, for example, it would be nice to trigger the search then.  However, from the event alone, I'm not able to distinguish between Enter for selecting an option and Enter for other reasons.  This could be possible for most of the selection components with a little bit of hackery to check if the popup is visible.  However, the oj-combobox-many is completely hiding the keyboard event by calling preventDefault on the event, so I can never see it.  There's also a possible issue with the fact that the Combobox Many component has some Enter key functionality that isn't tied to a popup.

You can see the missing event for oj-combobox-many by making the following tweaks to the Cookbook example:

HTML

<div id="form1" on-keyup="[[keyUp]]">

JavaScript

          this.keyUp = function(event) {

            console.warn(event);

          }

As you are typing in the rendered component, you'll see events for all the keys except the Enter key.  You can make the same modifications to the oj-select-one, oj-select-many, and oj-combobox-one Cookbook examples and you'll see Enter key events.

Is anyone aware of a consistent, reliable way to hook into the Enter key event for components like I'm trying to do here?  I'm also wondering if Oracle would entertain some kind of enhancement to enable this kind of functionality.  Either by updating the individual components or maybe even adding some sort of Submit event to the oj-form-layout that manages this better.

Comments
Post Details
Added on Aug 19 2019
7 comments
665 views