From fac6ec077e87674dc8dc4351736daad31e7bca31 Mon Sep 17 00:00:00 2001 From: Spyros Ioakeimidis Date: Thu, 1 Feb 2018 20:44:45 +0100 Subject: [PATCH] Extend input type check in selection capabilities (#12062) When an email input was replaced by a disabled text input on the same DOM position, an error would occur when trying to `setSelection`. The reason was that in `getSelectionInformation` the `selectionRange` was set to `null` as `hasSelectionCapabilities` was returning `false` for an `email` input type. `email` and `tel` input types do have selection capabilities, so in that case, `hasSelectionCapabilities` should return `true`. --- .../components/fixtures/text-inputs/index.js | 35 ++++ .../src/client/ReactInputSelection.js | 3 +- scripts/rollup/results.json | 180 +++++++++--------- 3 files changed, 127 insertions(+), 91 deletions(-) diff --git a/fixtures/dom/src/components/fixtures/text-inputs/index.js b/fixtures/dom/src/components/fixtures/text-inputs/index.js index af71edcbb5cbf..47c5bdb3216f6 100644 --- a/fixtures/dom/src/components/fixtures/text-inputs/index.js +++ b/fixtures/dom/src/components/fixtures/text-inputs/index.js @@ -6,6 +6,10 @@ import InputTestCase from './InputTestCase'; const React = window.React; class TextInputFixtures extends React.Component { + state = { + formSubmitted: false, + }; + render() { return ( + + +
  • Type "test@test.com"
    • +
  • Press enter
    • +     + + + There should be no selection-related error in the console. + + + +
    { + event.preventDefault(); + this.setState({formSubmitted: true}); + }}> +
    + Email + {!this.state.formSubmitted ? ( + + ) : ( + + )} +
    +
    +     +     + diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js index 506153a118053..97fea3291af3b 100644 --- a/packages/react-dom/src/client/ReactInputSelection.js +++ b/packages/react-dom/src/client/ReactInputSelection.js @@ -26,7 +26,8 @@ export function hasSelectionCapabilities(elem) { const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase(); return ( nodeName && - ((nodeName === 'input' && elem.type === 'text') || + ((nodeName === 'input' && + ['text', 'email', 'tel'].indexOf(elem.type) >= 0) || nodeName === 'textarea' || elem.contentEditable === 'true') ); diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json index a53f77637e673..9dda57c8e336a 100644 --- a/scripts/rollup/results.json +++ b/scripts/rollup/results.json @@ -4,120 +4,120 @@ "filename": "react.development.js", "bundleType": "UMD_DEV", "packageName": "react", - "size": 55375, - "gzip": 15018 + "size": 55984, + "gzip": 15322 }, { "filename": "react.production.min.js", "bundleType": "UMD_PROD", "packageName": "react", - "size": 6546, - "gzip": 2789 + "size": 6727, + "gzip": 2896 }, { "filename": "react.development.js", "bundleType": "NODE_DEV", "packageName": "react", - "size": 45791, - "gzip": 12702 + "size": 46405, + "gzip": 12989 }, { "filename": "react.production.min.js", "bundleType": "NODE_PROD", "packageName": "react", - "size": 5341, - "gzip": 2343 + "size": 5518, + "gzip": 2438 }, { "filename": "React-dev.js", "bundleType": "FB_DEV", "packageName": "react", - "size": 45129, - "gzip": 12220 + "size": 45830, + "gzip": 12520 }, { "filename": "React-prod.js", "bundleType": "FB_PROD", "packageName": "react", - "size": 12675, - "gzip": 3412 + "size": 13100, + "gzip": 3577 }, { "filename": "react-dom.development.js", "bundleType": "UMD_DEV", "packageName": "react-dom", - "size": 569094, - "gzip": 133855 + "size": 591010, + "gzip": 138251 }, { "filename": "react-dom.production.min.js", "bundleType": "UMD_PROD", "packageName": "react-dom", - "size": 94278, - "gzip": 30883 + "size": 97463, + "gzip": 31906 }, { "filename": "react-dom.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 553111, - "gzip": 130124 + "size": 575019, + "gzip": 134406 }, { "filename": "react-dom.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 92696, - "gzip": 29923 + "size": 95891, + "gzip": 30927 }, { "filename": "ReactDOM-dev.js", "bundleType": "FB_DEV", "packageName": "react-dom", - "size": 571833, - "gzip": 132486 + "size": 594181, + "gzip": 136751 }, { "filename": "ReactDOM-prod.js", "bundleType": "FB_PROD", "packageName": "react-dom", - "size": 267496, - "gzip": 51395 + "size": 278235, + "gzip": 53021 }, { "filename": "react-dom-test-utils.development.js", "bundleType": "UMD_DEV", "packageName": "react-dom", - "size": 41636, - "gzip": 11940 + "size": 41689, + "gzip": 11957 }, { "filename": "react-dom-test-utils.production.min.js", "bundleType": "UMD_PROD", "packageName": "react-dom", - "size": 10616, - "gzip": 3941 + "size": 10641, + "gzip": 3954 }, { "filename": "react-dom-test-utils.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 36373, - "gzip": 10481 + "size": 36426, + "gzip": 10498 }, { "filename": "react-dom-test-utils.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 10160, - "gzip": 3834 + "size": 10185, + "gzip": 3849 }, { "filename": "ReactTestUtils-dev.js", "bundleType": "FB_DEV", "packageName": "react-dom", - "size": 37102, - "gzip": 10564 + "size": 37155, + "gzip": 10582 }, { "filename": "react-dom-unstable-native-dependencies.development.js", @@ -165,183 +165,183 @@ "filename": "react-dom-server.browser.development.js", "bundleType": "UMD_DEV", "packageName": "react-dom", - "size": 96757, - "gzip": 25839 + "size": 100819, + "gzip": 26647 }, { "filename": "react-dom-server.browser.production.min.js", "bundleType": "UMD_PROD", "packageName": "react-dom", - "size": 14488, - "gzip": 5818 + "size": 15714, + "gzip": 6121 }, { "filename": "react-dom-server.browser.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 85807, - "gzip": 23140 + "size": 89865, + "gzip": 23943 }, { "filename": "react-dom-server.browser.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 13829, - "gzip": 5574 + "size": 15056, + "gzip": 5871 }, { "filename": "ReactDOMServer-dev.js", "bundleType": "FB_DEV", "packageName": "react-dom", - "size": 90048, - "gzip": 23276 + "size": 94037, + "gzip": 24042 }, { "filename": "ReactDOMServer-prod.js", "bundleType": "FB_PROD", "packageName": "react-dom", - "size": 30295, - "gzip": 7822 + "size": 32851, + "gzip": 8228 }, { "filename": "react-dom-server.node.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 87775, - "gzip": 23648 + "size": 91833, + "gzip": 24445 }, { "filename": "react-dom-server.node.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 14653, - "gzip": 5882 + "size": 15880, + "gzip": 6174 }, { "filename": "react-art.development.js", "bundleType": "UMD_DEV", "packageName": "react-art", - "size": 366568, - "gzip": 81568 + "size": 386665, + "gzip": 85447 }, { "filename": "react-art.production.min.js", "bundleType": "UMD_PROD", "packageName": "react-art", - "size": 84611, - "gzip": 26455 + "size": 87268, + "gzip": 27288 }, { "filename": "react-art.development.js", "bundleType": "NODE_DEV", "packageName": "react-art", - "size": 290639, - "gzip": 62540 + "size": 310738, + "gzip": 66421 }, { "filename": "react-art.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-art", - "size": 48273, - "gzip": 15466 + "size": 50924, + "gzip": 16228 }, { "filename": "ReactART-dev.js", "bundleType": "FB_DEV", "packageName": "react-art", - "size": 295882, - "gzip": 62334 + "size": 316401, + "gzip": 66257 }, { "filename": "ReactART-prod.js", "bundleType": "FB_PROD", "packageName": "react-art", - "size": 147792, - "gzip": 25778 + "size": 156400, + "gzip": 27121 }, { "filename": "ReactNativeRenderer-dev.js", "bundleType": "RN_DEV", "packageName": "react-native-renderer", - "size": 421415, - "gzip": 92969 + "size": 442414, + "gzip": 97031 }, { "filename": "ReactNativeRenderer-prod.js", "bundleType": "RN_PROD", "packageName": "react-native-renderer", - "size": 200039, - "gzip": 35042 + "size": 208805, + "gzip": 36394 }, { "filename": "react-test-renderer.development.js", "bundleType": "NODE_DEV", "packageName": "react-test-renderer", - "size": 287210, - "gzip": 61295 + "size": 307773, + "gzip": 65362 }, { "filename": "react-test-renderer.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-test-renderer", - "size": 46631, - "gzip": 14753 + "size": 49333, + "gzip": 15567 }, { "filename": "ReactTestRenderer-dev.js", "bundleType": "FB_DEV", "packageName": "react-test-renderer", - "size": 292549, - "gzip": 61128 + "size": 313531, + "gzip": 65200 }, { "filename": "react-test-renderer-shallow.development.js", "bundleType": "NODE_DEV", "packageName": "react-test-renderer", - "size": 17328, - "gzip": 4208 + "size": 19295, + "gzip": 4469 }, { "filename": "react-test-renderer-shallow.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-test-renderer", - "size": 6421, - "gzip": 2181 + "size": 6726, + "gzip": 2209 }, { "filename": "ReactShallowRenderer-dev.js", "bundleType": "FB_DEV", "packageName": "react-test-renderer", - "size": 18804, - "gzip": 4332 + "size": 20745, + "gzip": 4545 }, { "filename": "react-noop-renderer.development.js", "bundleType": "NODE_DEV", "packageName": "react-noop-renderer", - "size": 18298, - "gzip": 5159 + "size": 18575, + "gzip": 5260 }, { "filename": "react-noop-renderer.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-noop-renderer", - "size": 6381, - "gzip": 2558 + "size": 6421, + "gzip": 2568 }, { "filename": "react-reconciler.development.js", "bundleType": "NODE_DEV", "packageName": "react-reconciler", - "size": 269084, - "gzip": 56920 + "size": 289173, + "gzip": 60799 }, { "filename": "react-reconciler.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-reconciler", - "size": 39964, - "gzip": 12786 + "size": 42613, + "gzip": 13575 }, { "filename": "react-reconciler-reflection.development.js", @@ -375,15 +375,15 @@ "filename": "ReactFabric-dev.js", "bundleType": "RN_DEV", "packageName": "react-native-renderer", - "size": 416100, - "gzip": 91978 + "size": 437197, + "gzip": 96082 }, { "filename": "ReactFabric-prod.js", "bundleType": "RN_PROD", "packageName": "react-native-renderer", - "size": 195831, - "gzip": 34427 + "size": 204529, + "gzip": 35768 } ] } \ No newline at end of file