Inputs inside cells are focused unintentionally

[msojka]

Same as #398

I'd like to make an editable spreadsheet with the input in each cell. Everything works fine and fast the only issue is that when I focus any input every other n-th row input is focused as well (n depends on the height of the table).

Clicked:

Scrolled:

[KamranAsif]

Can you please create a jsfiddle for this? You can fork off https://jsfiddle.net/uq8osbp1/

[wcjordan]

@msojka I've seen a similar issue with images which happened because the table recycles rows and updates the props on them for performance. With images updating of the props would keep the old image and just update the src attribute on it, leading to the wrong images appearing until you stopped scrolling.

I was able to work around the issue by setting a key prop on the image element (at the cost of not getting to recycle our image elements).

A fiddle as Kam mentioned, or details on how your focused components are specified would be great. Thanks!

[msojka]

@KamranAsif here is minimum jsfiddle to replicate the issue: https://jsfiddle.net/msojka/f6aqLe0y/1/

Click to focus a1 input and scroll down to see multiple inputs created and focused as well (where exactly depends on height).

[KamranAsif]

@msojka As @wcjordan mentioned, you can use the key property to fix this:

<input 
  key={this.props.rowIndex} 
  type="text" 
  value={this.props.data[this.props.rowIndex][this.props.columnKey]} 
/>

https://jsfiddle.net/9jzy061k/3/

[msojka]

@KamranAsif ok that helped. Also note that I found it's important to add key to MyCell as well to ensure proper passing of props to the cells and children.

Anyways with this sorted out everything works great with one caveat. Scrolling (just scrolling) is terribly slow in IE 11. Even when stripped down to just a few data and simple cell content (divs instead of inputs).Chrome and FF are smooooth. Seems like IE render engine is just horrible. Anybody else experiencing same thing?

[KamranAsif]

@msojka Hmm we haven't run into any issues like that yet. Does scrolling on this webpage also appear slow to you? http://schrodinger.github.io/fixed-data-table-2/example-reorder.html

[burakcan]

The whole point of the fixed-data-table is to work with "fixed data". It's optimisations comes from windowing and recycling. In the case of inputs, recycling is not possible and it will cause lots of performance loss. I think there's nothing to do here other than using keys and disabling recycling for that elements.