Skip to Content

enable Tab browsing for Table - Input fields and Select Dropdowns

Hello

I have this sap.m.Table where I have a mix of Input Fields and Select UI Elements, and I am looking to enable Tab browsing for these UI elements. So if you are on a Input field, and you press Tab - it should go to the next Select or Input Field.

Seems like the Table has inbuilt support for keyboard, but for some reasons - it does not work. I am on sapui5 version of 1.38.19

Here is screenshot of what it may look like

As you see, I have Select Dropdowns and Input Fields in different rows of the Table. How do I enable Tab browsing between them?

Any inputs/hints are welcome.

Thanks

Sandip

pic.jpg (114.3 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Apr 28, 2017 at 03:00 PM

    Sandip,

    Did you try playing with the actual source wherein each of the input text (DOM Element) can be given a name and you work with utilizing getElementByID or getElementbyTagName and utilize .next() and/or .focus()? A few lines of codes available in GitHub.com

    Regards,

    Mark Pe
    SAP Product Support

    Add comment
    10|10000 characters needed characters exceeded

    • Thanks Mark

      I did try with playing with the DOM, but could not get it to work. This is what I did so far

      1) Register for onAfterRendering of the Table

      2) Listen to focusin key stroke on the Table, so as to find the current select Input field or Dropdown

      3) Listen to Tab key stroke on the Table, to move the focus to the next Input or Dropdown Field

      $('#'+ oTableID).on( 'keyup', function (e) { 
      if(e.which ===9 && !e.shiftkey){ 
      var currentRowDiv = e.target;  
      var parentTBody = e.target.parentElement; 
      var nextSibling = e.target.nextSibling; 
      $(e.target.nextSibling).find('.sapMInput').focus();  
      // prevent any default actions 
        if (e.preventDefault) { 
      e.preventDefault(); 
        }
      return false; // so as to block the execution, the input can do its own stuff, onChange/Enter Key } I was thinking e.target would give the Row of the currently selected Input/Dropdown, but it does not. So I am missing something here. Thanks Sandip
  • Apr 30, 2017 at 10:49 PM
    Add comment
    10|10000 characters needed characters exceeded