Question
Express Scripts
US
Last activity: 4 Aug 2017 11:07 EDT
Repeating Grid inside of a Modal does not recognize keyboard events.
Hey everybody,
I am working on a search function that pops up in a Modal from click of a search icon. Inside the modal is some input search fields, and after you click submit, a Repeating grid displays on the modal with results from a service call. Our business need is to be able to navigate through the list using up and down keys and selecting an entry using the enter key. The issue is that the grid inside the modal only responds to mouse clicks. The keyboard seems to be manipulating the parent window. It's not the entire modal, because the keyboard responds to the input fields on the modal. Just the repeating grid seems to be a problem. Even after clicking and highlighting a row on the list, the keyboard is not be in focus to use keys. Click works and double-click works. Up, Down, and Enter will not work.
Thanks for your help,
Jeremy
Accepted Solution
Express Scripts
US
Update: I have come to a solution.
For whatever reason, it was not setting focus properly when launching the modal. So I added actions to the button itself that launches the modal, which allowed to me to set focus on a property (list.pxresults), rather than on the next/current/prev item in the list. This allowed me to set focus on the list property itself, which then allowed the up/down/enter keys to work as expected. Thank you for your help!!
Pegasystems Inc.
IN
Hi Jeremy,
Can you check the actions configured on Up and Down keys on the Grid? Ex: Up Key -> Set Focus (Previous Item)
Also does this work outside modal dialog?
Pegasystems Inc.
US
Hi Jeremy,
I quickly created an example (button click to launch modal dialog through calling Local action) on my system. I was able to navigate through the list using up and down keys and selecting an entry using the enter key.
Please see my attached screenshots.
By default, when you create a new repeating grid, the 'Enter' key is associated with 'Edit Item', 'Up key' with 'Set Focus to Previous Item' and 'Down key' with 'Set Focus Next Item'.
In my example, I also selected 'Inline' -> 'Click row to edit' under Operations.
So, if you configure your repeating grid (inside modal dialog) correctly, you should be able to do it.
Thanks,
Susan
Accepted Solution
Express Scripts
US
Update: I have come to a solution.
For whatever reason, it was not setting focus properly when launching the modal. So I added actions to the button itself that launches the modal, which allowed to me to set focus on a property (list.pxresults), rather than on the next/current/prev item in the list. This allowed me to set focus on the list property itself, which then allowed the up/down/enter keys to work as expected. Thank you for your help!!