In the previous blogs (Part 1 and Part 2) we saw how to implement some Excel-like functionalities in a sap.ui.Table.
The arrow keys navigation between comboboxes have an issue: the value of the cell is updated with the previous or next item.
We could try to use the preventDefault method but in this case it is not enough.
Today I want to share how I solved this issue by using the stopPropagation method.
- Open the application created in the previous blogs inside the App Designer
- You can replace the whole enableExcelFnToUiTable JavaScript function with the latest code: GitHub - enableExcelFnToUiTable.js
- Or eventually you can just change the onkeydown event: GitHub - Prevent the combobox value change when user navigate with arrow-keys navigation buttons commit
Inside the onkeydown event we check first if the current target has the combobox class and the key pressed is ArrowUp or ArrowDown.
Finally we use the stopPropagation method to prevent the standard behaviour and fix the issue.
Here a GIF:
Hope this helps
Happy holidays and keep rocking!