cancel
Showing results for 
Search instead for 
Did you mean: 

Regarding the table tabbing issue...

Former Member
0 Kudos
208

Hi guys,

first of all: yes, I read this post and no, it didn't solve the problem.

So, SAPUI5 has an issue with the tab functionality in editable tables - you can't jump to the next input field using the tab key, because the SAPUI5 environment switches between the controls itself when you press tab. I think this is a huge setback compared to classical ALV processing. It basically makes changes in tables impossible without using the mouse.

For a customer project I need this functionality so I'm looking for ways to bypass the UI5 standard handling.

I played around a bit and found something interesting:

When you deactivate the keydown handling for the sap.m table (stopPropagation and preventDefault), then the tab navigation nearly works perfectly fine. BUT: only if you register the keydown for the input templates and do an alert statement in it.

I know it sounds strange and I don't understand the behaviour, but check it out yourself:

JS Bin - Collaborative JavaScript Debugging

The cursor jumps from inputfield to inputfield (even to the next row), but only if the alert statement is active. When deleting the statement the tab key will do nothing at all.

Can someone explain this behaviour? Maybe we can find a way to make it work without the alert?

Btw.: Another problem is the scrolling when the user reaches the last visible row... why is the table editing such a hassle in SAPUI5?!

Regards,

Klaus

Accepted Solutions (1)

Accepted Solutions (1)

saivellanki
Active Contributor
0 Kudos

Hi Klaus,

Will this sample help? Plunker

I know code is little bit messy, but this is the workaround that I found so far.

Regards,

Sai Vellanki.

Former Member
0 Kudos

Hi Sai,

thanks for your example, it works quite well. I will try to use your code with a sap.m table and report back.

Nonetheless, I see two problems with your coding:

1) it is rather complex

2) the navigation only works in one direction - normally SHIFT+TAB should jump to the previous input field. Do you think It's possible to extend the functionality?

Regards,

Klaus

saivellanki
Active Contributor
0 Kudos

Klaus,

Yeah, it is little complex.

I will have to check the reverse tab functionality.

Regards,

Sai Vellanki.

Former Member
0 Kudos

Hi Sai,

I'm already on it.

With (e.which == 9 && e.shiftKey) you can catch the reverse tab event.

Another problem I found is that your code only works for tables where every column is editable.

I will try to modify your coding and make it a bit more flexible. Will report back when I have a result.

Regards,

Klaus

Former Member
0 Kudos

Hi Sai,

I extended your coding and made a blog post about it:

In this version, the reverse tab is implemented and I used sap.m inputs.

Cheers,

Klaus

saivellanki
Active Contributor
0 Kudos

Impeccable work Klaus!

Former Member
0 Kudos

Hello,

thanks for sharing your work.

I updated your blog with this answer. It refers to using a sap.m.Table and proposes a second approach which handles up/down arrow keys instead of tab.

Answers (0)