Allow custom attribute named on to be passed on to elements (#11153)

* Allow single `on` property for custom elements * Remove test from ReactDOMComponent-test * Allow custom attribute named 'on' to be passed * Check property length instead of comparing strings
facebook · Oct 10, 2017 · 65b16b1 · 65b16b1
1 parent 80596c2
commit 65b16b1
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/renderers/dom/shared/DOMProperty.js b/src/renderers/dom/shared/DOMProperty.js
@@ -205,7 +205,8 @@ var DOMProperty = {
     }
     if (
       (name[0] === 'o' || name[0] === 'O') &&
-      (name[1] === 'n' || name[1] === 'N')
+      (name[1] === 'n' || name[1] === 'N') &&
+      name.length > 2
     ) {
       return false;
     }

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -991,6 +991,11 @@ describe('ReactDOMServerIntegration', () => {
       );
       expect(e.getAttribute('onunknownevent')).toBe(null);
     });
+
+    itRenders('custom attribute named `on`', async render => {
+      const e = await render(<div on="tap:do-something" />);
+      expect(e.getAttribute('on')).toEqual('tap:do-something');
+    });
   });
 
   describe('elements and children', function() {

diff --git a/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js b/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
@@ -70,7 +70,7 @@ if (__DEV__) {
       return true;
     }
 
-    if (lowerCasedName.indexOf('on') === 0) {
+    if (lowerCasedName.indexOf('on') === 0 && lowerCasedName.length > 2) {
       warning(
         false,
         'Unknown event handler property `%s`. It will be ignored.%s',