Tab-Navigating through UI Table with Input fields

abap2UI5 / abap2UI5

Developing UI5 Apps Purely in ABAP

http://www.abap2UI5.org

MIT License

284 stars 55 forks source link

Tab-Navigating through UI Table with Input fields #1033

Closed LadwigDev closed 5 months ago

LadwigDev commented 6 months ago

Hi, I have encountered a strange behaviour. When tab-navigating through a ui table with multiple input fields without changing anything everything works fine, the cursor is set to the next input field:

However when a user edits an input field which triggers a change event and a view model update, sometimes (not always!) the focus is changed from the input field to the surrounding table cell:

This is a problem because the user can't change multiple table entries one after the other fast and the usability of the app is worsened. Do you have an idea what could trigger this behaviour?

Best regards Jan

oblomov-dev commented 6 months ago

Hi, Yes focus handling is often complex in UI5. Never had this issue before but I can take a look to it. Is there a chance that you share a little sample app which reproduces your problem? Then I can easily check it on my side. Best regards.

LadwigDev commented 6 months ago

Hi @oblomov-dev , I have enhanced the demo app 160 for this purpose and also added a few things I found out while working with the UI table which may be helpful for others.

Another info: I have tried the tab navigation with Google Chrome and MS Edge and in both browsers I have the problem described above.

Here is the file:

Demo App 160 Enhanced.txt

Best regards

oblomov-dev commented 6 months ago

thank you, added you code as sample 172 and try to take a look to it in the next days.

oblomov-dev commented 5 months ago

That seems to be a general problem of the sap.ui.table: https://community.sap.com/t5/technology-q-a/sap-ui-table-table-moving-focus-from-column-to-input-field-within-template/qaq-p/12564500

you can consider if changing the table to sap.m.table is an option for you.

anyway, i added some pure JavaScript to adjust the focus handling, check demo 172. After every backend roundtrip the position of the focus gets corrected. Maybe there are more elegant ways to solve this issue but for now it seems to work:

LadwigDev commented 5 months ago

Hi @oblomov-dev great, thank you for your help, the custom JS solution works with my app! This is something I would not have been able to achieve as a pure ABAP developer without JS knowledge 😆

Have a nice week!

Best regards Jan