JET Version: 10.0
Hi JET Community
We are using the Editable Form Table pattern and have some challenges with the way in which using the ENTER key on a keyboard exits the edit mode for the row.
The problem arises where the ENTER key is integral to the functionality of a component but using it in this pattern exits edit mode and does not have the desired effect on the component. There are 2 issues specifically:
1) Cancel Button: Using the same pattern as in the Cookbook demo, if you edit a row, navigate to the Cancel button and hit the ENTER key, edit mode is exited and the data is committed to the table. This is because the function on the button call (handleCancel) isn’t called because the table has stolen focus and the button action is not fired. You can see this on the Cookbook Demo. This is quite fundamental because if a keyboard user edits a row and actions the Cancel button with the ENTER key they would expect the change to be cancelled when actually it is committed to the table. You can get around this using the space bar to action the buttons however users more instinctively use ENTER and the JS Doc states that both ENTER and Space can be used.
2) Text-Area: When using a OJ <text-area> within an Editable Form Table, users will often need to use the ENTER key to create new lines however this is not possible as the table exits edit mode when the ENTER key is used. You can get around this by using ALT+ENTER however this is unintuitive and users are struggling with this.
Is anyone able to provide a workaround for these features?
I was thinking whether it is possible to intercept the event to cancel the default behaviour and to not exit edit mode under certain conditions?
Many thanks