Table stops receiving kbd input in mozilla

[Jure Erznoznik]

I made a table that shows 20 rows of a table at a time.
When the user presses down or up arrow, the table will scroll as necessary
filling new rows.

But I have a problem with the following code snippet:
while (tr.sectionRowIndex < this.scrollRowsVisible && this._DBCacheS >
0)
{ //Scroll Up
// this.tBody.removeChild(this._DBRowCache[this._DBCacheE].element);
this.tBody.deleteRow(-1);
this._DBCacheS--;
this._DBCacheE--;
this.tBody.insertBefore(this._DBRowCache[this._DBCacheS].element,
this._DBRowCache[this._DBCacheS + 1].element);
}
while (tr.sectionRowIndex > (this.tBody.rows.length -
this.scrollRowsVisible) && this._DBCacheE < this._DBRowCache.length - 1)
{ //Scroll down
// this.tBody.removeChild(this._DBRowCache[this._DBCacheS].element);
this.tBody.deleteRow(0);
this._DBCacheS++;
this._DBCacheE++;
this.tBody.appendChild(this._DBRowCache[this._DBCacheE].element);
}

tr = currently selected row
this.scrollRowsVisible = # rows to have visible from currently selected row
to table "edge". This means that when scrolling down, there will always be 4
additional rows displayed below the current one.
this._DBCacheS, this._DBCacheE - indexes to first and last visible element
in cache. All elements between these values are shown in table
this._DBRowCache.length - # elements in cache

CSS:
..mytable {
font: Icon;
border: 1px Solid ThreeDShadow;
color: rgb(255,255,255);
margin-left: auto;
margin-right: auto;
text-align: left;
-moz-user-select: none;
-moz-user-focus: normal;
-moz-user-input: enabled;
}

This snippet works like a charm in IE, but in Mozilla / Firefox, it will
always stop receiving kbd input after #rows_in_table -
this.scrollRowsVisible + 1 consecutive movements.
This is the only code that checks for this.scrollRowsVisible and the number
of successful movements is directly related to this variable. It does not
matter how many times the loops execute eg. I can start presing down arrow
at the top of the table and it will stop after 16 presses (just after it
scrolls for the first time). Alternatively I can use the mouse to select one
of the bottom rows and then continue moving down with kbd only to stop after
scrolling 16 times.
To restore kbd input, I have to click on the table with the mouse. There is
no "special" code in that event that would help me "unlock". Tried every
possible variation. But I did discover that removing this.tBody.deleteRow
stops this behaviour.

Does anybody have any idea why this is happening? Any help would be greatly
appreciated.

Jure

 

[Jure Erznoznik]

Stupid me! Found out why:
The table stops receiving kbd input the moment I remove the row I clicked.
Obviously this row had the kbd input focus.

The question now would be: Does anybody know how to set focus to a table row
or table cell? focus() is not a method of those objects.

Thanks,
Jure

 

[Jure Erznoznik]

Just for the reference:
..mytable tr {
-moz-user-focus: ignore;
}
This solves the problem. If the row can't receive focus, then it leaves only
the whole table / tbody to receive it. Therefore deleting the row will not
result in lost focus.

I made a table that shows 20 rows of a table at a time.
When the user presses down or up arrow, the table will scroll as necessary
filling new rows.

But I have a problem with the following code snippet:
while (tr.sectionRowIndex < this.scrollRowsVisible && this._DBCacheS >
0)
{ //Scroll Up
// this.tBody.removeChild(this._DBRowCache[this._DBCacheE].element);
this.tBody.deleteRow(-1);
this._DBCacheS--;
this._DBCacheE--;
this.tBody.insertBefore(this._DBRowCache[this._DBCacheS].element,
this._DBRowCache[this._DBCacheS + 1].element);
}
while (tr.sectionRowIndex > (this.tBody.rows.length -
this.scrollRowsVisible) && this._DBCacheE < this._DBRowCache.length - 1)
{ //Scroll down
// this.tBody.removeChild(this._DBRowCache[this._DBCacheS].element);
this.tBody.deleteRow(0);
this._DBCacheS++;
this._DBCacheE++;
this.tBody.appendChild(this._DBRowCache[this._DBCacheE].element);
}

tr = currently selected row
this.scrollRowsVisible = # rows to have visible from currently selected
row to table "edge". This means that when scrolling down, there will
always be 4 additional rows displayed below the current one.
this._DBCacheS, this._DBCacheE - indexes to first and last visible element
in cache. All elements between these values are shown in table
this._DBRowCache.length - # elements in cache

CSS:
.mytable {
font: Icon;
border: 1px Solid ThreeDShadow;
color: rgb(255,255,255);
margin-left: auto;
margin-right: auto;
text-align: left;
-moz-user-select: none;
-moz-user-focus: normal;
-moz-user-input: enabled;
}

This snippet works like a charm in IE, but in Mozilla / Firefox, it will
always stop receiving kbd input after #rows_in_table -
this.scrollRowsVisible + 1 consecutive movements.
This is the only code that checks for this.scrollRowsVisible and the
number of successful movements is directly related to this variable. It
does not matter how many times the loops execute eg. I can start presing
down arrow at the top of the table and it will stop after 16 presses (just
after it scrolls for the first time). Alternatively I can use the mouse to
select one of the bottom rows and then continue moving down with kbd only
to stop after scrolling 16 times.
To restore kbd input, I have to click on the table with the mouse. There
is no "special" code in that event that would help me "unlock". Tried
every possible variation. But I did discover that removing
this.tBody.deleteRow stops this behaviour.

Does anybody have any idea why this is happening? Any help would be
greatly appreciated.

Jure