react-virtualized - npm Package Compare versions

Comparing version 5.5.3 to 5.5.4

CHANGELOG.md

 Changelog
 ------------
 
+##### 5.5.4
+Changed key-down event handler in `VirtualScroll`, `FlexTable`, and `Grid` to no longer call `event.preventDefault()` for arrow-key events.
+This was causing poor user interactions for `<input>` elements within `VirtualScroll` and `FlexTable` components.
+Note that this issue still occurs for `<input>` elements in a `Grid` component.
+
+This release also removes the `outline: 0` default style for `Grid`.
+After consideration I think that's a harmful default behavior.
+
 ##### 5.5.3
@@ -5,0 +13,0 @@ Added `will-change` property to `Grid` to work around a Chrome bug(?) that caused the entire grid to be repainted whenever a new row or column was added. This was negatively impacting scrolling performance for Chrome under certain conditions. This change is not expected to impact Firefox, Safari, or IE.

dist/commonjs/Grid/Grid.js

@@ -671,4 +671,2 @@ 'use strict';
         case 'ArrowDown':
-          event.preventDefault(); // Prevent key from also scrolling surrounding window
-
           datum = this._rowMetadata[this._renderedRowStartIndex];
@@ -682,4 +680,2 @@ newScrollTop = Math.min(this._getTotalRowsHeight() - height, scrollTop + datum.size);
         case 'ArrowLeft':
-          event.preventDefault(); // Prevent key from also scrolling surrounding window
-
           this.scrollToCell({
@@ -691,4 +687,2 @@ scrollToColumn: Math.max(0, this._renderedColumnStartIndex - 1),
         case 'ArrowRight':
-          event.preventDefault(); // Prevent key from also scrolling surrounding window
-
           datum = this._columnMetadata[this._renderedColumnStartIndex];
@@ -702,4 +696,2 @@ newScrollLeft = Math.min(this._getTotalColumnsWidth() - width, scrollLeft + datum.size);
         case 'ArrowUp':
-          event.preventDefault(); // Prevent key from also scrolling surrounding window
-
           this.scrollToCell({
@@ -706,0 +698,0 @@ scrollToColumn: this.props.scrollToColumn,

dist/es/Grid/Grid.js

@@ -644,4 +644,2 @@
         case 'ArrowDown':
-          event.preventDefault(); // Prevent key from also scrolling surrounding window
-
           datum = this._rowMetadata[this._renderedRowStartIndex];
@@ -655,4 +653,2 @@ newScrollTop = Math.min(this._getTotalRowsHeight() - height, scrollTop + datum.size);
         case 'ArrowLeft':
-          event.preventDefault(); // Prevent key from also scrolling surrounding window
-
           this.scrollToCell({
@@ -664,4 +660,2 @@ scrollToColumn: Math.max(0, this._renderedColumnStartIndex - 1),
         case 'ArrowRight':
-          event.preventDefault(); // Prevent key from also scrolling surrounding window
-
           datum = this._columnMetadata[this._renderedColumnStartIndex];
@@ -675,4 +669,2 @@ newScrollLeft = Math.min(this._getTotalColumnsWidth() - width, scrollLeft + datum.size);
         case 'ArrowUp':
-          event.preventDefault(); // Prevent key from also scrolling surrounding window
-
           this.scrollToCell({
@@ -679,0 +671,0 @@ scrollToColumn: this.props.scrollToColumn,

package.json

@@ -6,3 +6,3 @@ {
   "user": "bvaughn",
-  "version": "5.5.3",
+  "version": "5.5.4",
   "homepage": "https://github.com/bvaughn/react-virtualized",
@@ -9,0 +9,0 @@ "main": "dist/commonjs/index.js",

playground/grid.js

@@ -0,7 +1,33 @@
+var REACT_VIRTUALIZED_BANNER = 'https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png'
+
+function getColumnWidth (columnIndex) {
+  switch (columnIndex % 3) {
+    case 0:
+      return 65
+    case 1:
+      return 65
+    case 2:
+      return 100
+  }
+}
+
 function renderCell (params) {
-  return React.DOM.input({
-    className: 'input',
-    onChange: function () {},
-    defaultValue: `column:${params.columnIndex}, row:${params.rowIndex}`
-  })
+  var key = `c:${params.columnIndex}, r:${params.rowIndex}`
+  switch (params.columnIndex % 3) {
+    case 0:
+      return React.DOM.input({
+        className: 'input',
+        defaultValue: key,
+        onChange: function () {}
+      })
+    case 1:
+      return React.DOM.button({
+        className: 'button'
+      }, key)
+    case 2:
+      return React.DOM.img({
+        className: 'image',
+        src: REACT_VIRTUALIZED_BANNER
+      })
+  }
 }
@@ -19,7 +45,7 @@
             columnsCount: 1000,
-            columnWidth: 200,
+            columnWidth: getColumnWidth,
             height: params.height,
             overscanRowsCount: 0,
             renderCell: renderCell,
-            rowHeight: 40,
+            rowHeight: 30,
             rowsCount: 1000,
@@ -26,0 +52,0 @@ width: params.width

No alert changes

Improved metrics

Total package byte prevSize

607204

increased by0.12%

Lines of code

7208

increased by0.17%

No dependency changes