Intent

The purpose of this functionality is to allow configuration in the UIF for enter key behavior.

Design

Participants

All components will have a new property for configuring the enter key action.

Component

String enterKeyActionId - Id of the action that should be triggered when the enter key (key up) event is triggered on the component.

CollectionGroup

String addLineEnterKeyActionId - Id of the action that should be triggered when the enter key if invoked on a field in the add line (note if the enter key is specified for a zone in the line it will override).

String lineEnterKeyActionId - Id of the action that should be triggered when the enter key if invoked on a field within an existing collection line (note if the enter key is specified for a zone in the line it will override).

Collaboration

Each component with a configured enter key action creates a zone. When the enter key event occurs on the view, its zone will be found to determine what action should be invoked. This zone if found by finding the nearest ancestor element that has a configured enter key action.

<div id="Uif-Page" data-enterkey="save"> <!-- zone 1 -->
 
  <div id="TravelInfoSection data-enterkey="details"> <!-- zone 2 -->
     <input type="text" name="travelerFirstName"/>
     <input type="text" name="travelerLastName"/>
 
     <button id="details" type="button">Details</button>
  </div>
 
  <div id="TravelAccounts">
     <input type="text" name="travelAccount"/>
     <input type="text" name="travelSubAccount"/>
 
     <button id="add" type="button">Add</button>
  </div>
 
  <button id="save" type="button">Save</button>
 
</div>

In the above example, if focus is on the input field with name travelerFirstName, travelerLastName, or the button with id 'details', the action (button) with id 'details' will be triggered. When focus is anywhere outside these elements, the action (button) with id 'save' will be triggered.

There is no limit to the zone nesting level.

Configuration

<bean id="TravelView" parent="Uif-View" p:headerText="Travel View" p:enterKeyActionId="save">
...
</bean>

<bean id="TravelAccountInfo" parent="Uif-VerticalBoxSection" p:enterKeyActionId="details">
...
</bean>

For triggering custom script or other actions on the enter key, add custom script for the key events.

Issues

1. Should we set any defaults? What about actions that are part of collection lines (like the add or delete buttons)?
2. When focus is on an action (button, link, image), or link, should the default enter key action be to trigger that action and ignore zones (this is default browser behavior for most actions and links, although inputs of type image seem to not get triggered)?
3. What accessibility concerns need to be addressed? My assumption is this functionality would have no impact on AT devices.
   

Implementation Notes

• Data attribute "enterKey" would be added to the component for the enterKeyActionId specified on the component
• On the client we are going to look for an enterKey attribute on the component itself,and invoke that action by triggering a click event on that link or button.
• If set on an action, do not add the enterKey data attribute, possibly throw an exception
• krad.initialize.js for the elements that have data attribute enterKey we add a keyup event handler to them, which will catch child events, when enter is the key event caught, invoke above logic and stop propagation of the event
  • http://jsfiddle.net/x787g/1/
  • Do not do enter key invocation for "a, button, submit, img[data-role='Action'], input[data-role='Action']"  
• For collection groups we are going to have to add rowDataAttributes that get output on the tr in the table collection case and output on the group of the stacked collection item in the stacked collection case
• Adding a special value for enter key ids called "@PRIMARY" that will invoke the primary button of that group, but primary buttons must be identified by the primaryAction boolean flag which will add a data attribute called "primary_action" and set that true.   This will be targeted instead of an explicit id in this scenario.
• In stacked group scenario add the enterkey data attribute to the stackedGroups that are added in build line
• Read through this, good read to understand our approach http://javascript.info/tutorial/bubbling-and-capturing
• primary and id work work slightly differently, primary is just looking for the jQuery :first selection with primary flag it finds in that group and id is globally
• only fire the action click event if the action is not disabled and not hidden