Author Topic: Two way data binding causes erratic tab focus  (Read 2474 times)

jasonneary

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 3
    • View Profile
Two way data binding causes erratic tab focus
« on: February 18, 2020, 05:15:57 am »
We are using Knockout to do two way data binding to the 7.0.1 version of pqGrid.  We are experiencing very odd behavior with where the focus goes when tabbing after editing a quick succession of cells.  The more data bound to the grid the worse the behavior becomes.  But you can see the difference in behaviors with the example grids located on this site:

With two way Knockout binding (has the issue):
https://paramquery.com/pro/demos/ko_bind

Without two way Knockout binding (does not have the issue):
https://paramquery.com/pro/demos/ko_grid

The issue: Sometime after you press tab, the focus will jump out of the grid your are currently editing to some other place on the web page.

How to cause the issue: In a grid with a series of editable cells in a grid, as quickly as possible, press a key to edit the cell value, then press tab.  Repeat as quickly as possible, trying to edit every cell value in the row.

Question: Is there anything that can be done to keep the focus on the grid when someone tabs too quickly?

Note: To "fix" this in my application, I had to disable the tab functionality for the entire page.  The grid some how overrides that restriction for the grid specifically.  So when we tab too fast and the grid loses control of the focus, the page takes back over and stops the tab from doing anything.  This gives the grid the time to catch back up and the focus to go where is should go.  But this has disabled tabbing for all of the other controls on the page.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Two way data binding causes erratic tab focus
« Reply #1 on: February 18, 2020, 09:54:18 am »
I'm not able to reproduce the issue so far in this demo: https://paramquery.com/pro/demos/ko_bind

Do you have different settings from the demo, and in which browser are you facing this issue?

jasonneary

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Two way data binding causes erratic tab focus
« Reply #2 on: February 21, 2020, 03:17:54 am »
I tried the quick edit-tab process on "https://paramquery.com/pro/demos/ko_bind" in the following browsers and had the same bad behavior:

Google Chrome Version 80.0.3987.116 (Official Build) (64-bit)
Microsoft Edge Version 80.0.361.56 (Official build) (64-bit)
Microsoft Explorer Version 11.1622.16299.0

Steps to replicate:
Click on the first cell in row 2, column "Rank" in the "Knockoutjs grid".
In rapid succession, press 5, tab, 5, tab, 5, tab, 5 tab.

The effect:
Rank 2 is changed to "5".
Company 2 is selected.
The focus jumped over to the first cell in the first row and column in the unnamed grid on the right.
The first two cells in that row now have values of "5".

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: Two way data binding causes erratic tab focus
« Reply #3 on: February 24, 2020, 10:05:31 am »
The issue is reproducible, thanks for the steps.

There is no known quick fix solution to this issue. Meanwhile moving it to bug report board.