Fix tabbing with fixed size spreadsheet and other controls.

[deiussum]

I may be missing something, but the tabbing of this control doesn't seem to play nice with other inputs. For instance, if you have an input before the spreadsheet, trying to tab to the spreadsheet will jump right past it to the next input. Likewise, when you have a fixed size spreadsheet, it would be nice if tabbing at the end of the column would move you to the next row, and when in the last cell it would tab you to the next control.

Here is a simple jsfiddle demonstrating the issue. It would be nice to be able to tab from that first control into the spreadsheet, through the cells in the spreadsheet,and then to the last control.

https://jsfiddle.net/Deiussum/wx6scLkg/6/

[GBonnaire]

Hi,

For tab selection, you need add tabIndex attribute

<input type="text"  tabindex="1">
<div id="grid" tabindex="2"></div>
<input type="text" tabindex="3">

and this script for enter in jspreadsheet when is focused :

$('#grid').focusin(function() {
    if(!jspreadsheet.current) {
	  jspreadsheet.current = spreadsheet;
	  spreadsheet.updateSelectionFromCoords(0,0);
  }
  });

for your second question (tab go to next line), you need override key down controls of jspreadsheet like this :

                // Override keydowncontrols
		var currentKeyDownControls = jexcel.keyDownControls;
		jexcel.keyDownControls = function(e) {
			// If jspreadsheet is active and not in edition mode and Tab is pressed without shiftKey
			if(jspreadsheet.current && !jspreadsheet.current.edition && e.which == 9 && !e.shiftKey) {
				// In case where not insertColumn with tab
				if(!jspreadsheet.current.options.allowInsertColumn) {
					var maxColsIndex = jspreadsheet.current.options.columns.length - 1;
					var maxRowsIndex = jspreadsheet.current.rows.length - 1;
					
					var currentColIndex = Math.max(jspreadsheet.current.selectedCell[0], jspreadsheet.current.selectedCell[2]);
					var currentRowIndex = Math.max(jspreadsheet.current.selectedCell[1], jspreadsheet.current.selectedCell[3]);
					
					// If current selection is last column
					if(currentColIndex == maxColsIndex) {
						// If current selection is last row
						if(currentRowIndex == maxRowsIndex) {
							// If allow to insert row
							if(jspreadsheet.current.options.allowInsertRow) {
								jspreadsheet.current.insertRow();
							} else { // Else blur jspreadsheet
								jspreadsheet.current.resetSelection(true); // onblur
								jspreadsheet.current = null;
								
								return;
							}
						}
						
						// Go to next line
						jspreadsheet.current.down();
						jspreadsheet.current.first();
						
						// Stop propagation
						e.preventDefault();
						e.stopPropagation();
						return;
					}
				}
			}
			
			// Call default function
			return currentKeyDownControls(...arguments);
		}

your JSFiddle full code with my answer integrated :

<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css">
    <link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css">
  
  
    <form>   
      <div>
        <input type="text" tabindex="1">
      </div>
      <div id="grid" tabindex="2">

      </div>
      <div>
        <input type="text" tabindex="3">
      </div>
    </form>

    <script src="https://jsuites.net/v4/jsuites.js"></script>
    <script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
  


    <script type="text/javascript">
		// Override keydowncontrols
		var currentKeyDownControls = jexcel.keyDownControls;
		jexcel.keyDownControls = function(e) {
			// If jspreadsheet is active and not in edition mode and Tab is pressed without shiftKey
			if(jspreadsheet.current && !jspreadsheet.current.edition && e.which == 9 && !e.shiftKey) {
				// In case where not insertColumn with tab
				if(!jspreadsheet.current.options.allowInsertColumn) {
					var maxColsIndex = jspreadsheet.current.options.columns.length - 1;
					var maxRowsIndex = jspreadsheet.current.rows.length - 1;
					
					var currentColIndex = Math.max(jspreadsheet.current.selectedCell[0], jspreadsheet.current.selectedCell[2]);
					var currentRowIndex = Math.max(jspreadsheet.current.selectedCell[1], jspreadsheet.current.selectedCell[3]);
					
					// If current selection is last column
					if(currentColIndex == maxColsIndex) {
						// If current selection is last row
						if(currentRowIndex == maxRowsIndex) {
							// If allow to insert row
							if(jspreadsheet.current.options.allowInsertRow) {
								jspreadsheet.current.insertRow();
							} else { // Else blur jspreadsheet
								jspreadsheet.current.resetSelection(true); // onblur
								jspreadsheet.current = null;
								
								return;
							}
						}
						
						// Go to next line
						jspreadsheet.current.down();
						jspreadsheet.current.first();
						
						// Stop propagation
						e.preventDefault();
						e.stopPropagation();
						return;
					}
				}
			}
			
			// Call default function
			return currentKeyDownControls(...arguments);
		}
	

$(function() {
  var settings = {
    allowInsertRow: false,
    allowInsertColumn: false,
    allowDeleteRow: false,
    allowDeleteColumn: false,
    allowRenameColumn: false,
    parseFormulas: false,
    wordWrap: false,
    minDimensions: [4, 2],
    columns: [
      {
        title: 'Column 1',
        type: 'numeric',
        align: 'right',
        mask: '#.00',
        width: 100
      },
      {
        title: 'Column 2',
        type: 'numeric',
        align: 'right',
        mask: '#.00',
        width: 100
      },
      {
        title: 'Column 3',
        type: 'numeric',
        align: 'right',
        mask: '#.00',
        width: 100
      },
      {
        title: 'Column 3',
        type: 'numeric',
        align: 'right',
        mask: '#.00',
        width: 100
      }
    ],
  };
  
	var spreadsheet = $('#grid').jspreadsheet(settings);
	
	
	$('#grid').focusin(function() {
  		if(!jspreadsheet.current) {
			jspreadsheet.current = spreadsheet;
			spreadsheet.updateSelectionFromCoords(0,0);
		}
	});
});
</script>

[deiussum]

Thanks for the response! I've got some similar work arounds that sort of work, but was still running into some weird issues. Some of this might help fix some of that weirdness. I was really hoping to avoid having to tabindex everything because the actual form I'm working with has more inputs and once you start to tabindex some of the controls, you usually have to tabindex all of them.

[GBonnaire]

Hi,

You can make otherwise than tabIndex.

Just some ideas :

• Add input before div JSS with style visibility: hidden; height: 0px; width: 0px;, and add listener when is focused, you focus directly on your JSS
• With jQuery, find previous input before JSS, when is focusout and the next input after JSS is focusin, stop behavior and focus on JSS (but this way not good for me)
• You add listener key down for tab key on your document, and you make your control of focused

[deiussum]

I am currently checking for a tab in the keydown of the control right before the spreadsheet. I was actually thinking it would be cleaner to use the "invisible" control method in your first suggestion. I think one of the big things I am missing in my attempt was setting the jspreadsheet.current. I think that might account for some of the weirdness I have experienced. I plan to play with it some more today. Thanks again for the help.