Fix event handling when input name='nodeName'

facebook · Mar 22, 2016 · 1ba0464 · 1ba0464
1 parent 40c4635
commit 1ba0464
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 14 deletions.
diff --git a/src/renderers/dom/client/ReactInputSelection.js b/src/renderers/dom/client/ReactInputSelection.js
@@ -30,10 +30,8 @@ function isInDocument(node) {
 var ReactInputSelection = {
 
   hasSelectionCapabilities: function(elem) {
-    var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
-    return nodeName && (
-      (nodeName === 'input' && elem.type === 'text') ||
-      nodeName === 'textarea' ||
+    return elem instanceof window.HTMLTextAreaElement ||
+      (elem instanceof window.HTMLInputElement && elem.type === 'text') ||
       elem.contentEditable === 'true'
     );
   },
@@ -86,7 +84,7 @@ var ReactInputSelection = {
         end: input.selectionEnd,
       };
     } else if (document.selection &&
-        (input.nodeName && input.nodeName.toLowerCase() === 'input')) {
+        (input instanceof window.HTMLInputElement) {
       // IE8 input.
       var range = document.selection.createRange();
       // There can only be one selection per document in IE, so it must
@@ -122,7 +120,7 @@ var ReactInputSelection = {
       input.selectionStart = start;
       input.selectionEnd = Math.min(end, input.value.length);
     } else if (document.selection &&
-        (input.nodeName && input.nodeName.toLowerCase() === 'input')) {
+        input instanceof window.HTMLInputElement) {
       var range = input.createTextRange();
       range.collapse(true);
       range.moveStart('character', start);

diff --git a/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js b/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js
@@ -57,10 +57,9 @@ var activeElementValueProp = null;
  * SECTION: handle `change` event
  */
 function shouldUseChangeEvent(elem) {
-  var nodeName = elem.nodeName && elem.nodeName.toLowerCase();
   return (
-    nodeName === 'select' ||
-    (nodeName === 'input' && elem.type === 'file')
+    elem instanceof window.HTMLSelectElement ||
+    (elem instanceof window.HTMLInputElement && elem.type === 'file')
   );
 }
 
@@ -307,7 +306,7 @@ function shouldUseClickEvent(elem) {
   // This approach works across all browsers, whereas `change` does not fire
   // until `blur` in IE8.
   return (
-    (elem.nodeName && elem.nodeName.toLowerCase() === 'input') &&
+    (elem instanceof window.HTMLInputElement) &&
     (elem.type === 'checkbox' || elem.type === 'radio')
   );
 }

diff --git a/src/shared/utils/isTextInputElement.js b/src/shared/utils/isTextInputElement.js
@@ -33,10 +33,9 @@ var supportedInputTypes = {
 };
 
 function isTextInputElement(elem) {
-  var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
-  return nodeName && (
-    (nodeName === 'input' && supportedInputTypes[elem.type]) ||
-    nodeName === 'textarea'
+  return (
+    elem instanceof window.HTMLTextAreaElement ||
+    (elem instanceof window.HTMLInputElement && supportedInputTypes[elem.type])
   );
 }