Disregard interactive props with null values

Author: jessebeach

__tests__/src/rules/no-noninteractive-element-interactions-test.js

@@ -103,6 +103,7 @@ ruleTester.run('no-noninteractive-element-handlers', rule, {
     { code: '<div onClick={() => void 0} />;' },
     { code: '<div onClick={() => void 0} role={undefined} />;' },
     { code: '<div onClick={() => void 0} {...props} />;' },
+    { code: '<div onClick={null} />;' },
     { code: '<div onKeyUp={() => void 0} aria-hidden={false} />;' },
     { code: '<dl onClick={() => {}} />;' },
     { code: '<em onClick={() => {}} />;' },
@@ -123,6 +124,7 @@ ruleTester.run('no-noninteractive-element-handlers', rule, {
     { code: '<label onClick={() => {}} />;' },
     { code: '<legend onClick={() => {}} />;' },
     { code: '<link onClick={() => {}} />;' },
+    { code: '<main onClick={null} />;' },
     { code: '<map onClick={() => {}} />;' },
     { code: '<mark onClick={() => {}} />;' },
     { code: '<marquee onClick={() => {}} />;' },

__tests__/src/rules/no-static-element-interactions-test.js

@@ -35,6 +35,7 @@ ruleTester.run('no-static-element-interactions', rule, {
     { code: '<div className="foo" {...props} />;' },
     { code: '<div onClick={() => void 0} aria-hidden />;' },
     { code: '<div onClick={() => void 0} aria-hidden={true} />;' },
+    { code: '<div onClick={null} />;' },
     /* All flavors of input */
     { code: '<input onClick={() => void 0} />' },
     { code: '<input type="button" onClick={() => void 0} />' },

src/rules/no-noninteractive-element-interactions.js

@@ -13,7 +13,9 @@ import {
 import {
   elementType,
   eventHandlersByType,
-  hasAnyProp,
+  getPropValue,
+  getProp,
+  hasProp,
 } from 'jsx-ast-utils';
 import type { JSXOpeningElement } from 'ast-types-flow';
 import { generateObjSchema } from '../util/schemas';
@@ -49,7 +51,11 @@ module.exports = {
       const attributes = node.attributes;
       const type = elementType(node);
 
-      const hasInteractiveProps = hasAnyProp(attributes, interactiveProps);
+      const hasInteractiveProps = interactiveProps
+        .some(prop => (
+          hasProp(attributes, prop)
+          && getPropValue(getProp(attributes, prop)) != null
+        ));
 
       if (!domElements.includes(type)) {
         // Do not test higher level JSX components, as we do not know what

src/rules/no-static-element-interactions.js

@@ -14,7 +14,9 @@ import {
 import {
   elementType,
   eventHandlersByType,
-  hasAnyProp,
+  getPropValue,
+  getProp,
+  hasProp,
 } from 'jsx-ast-utils';
 import type { JSXOpeningElement } from 'ast-types-flow';
 import { generateObjSchema } from '../util/schemas';
@@ -50,7 +52,11 @@ module.exports = {
       const attributes = node.attributes;
       const type = elementType(node);
 
-      const hasInteractiveProps = hasAnyProp(attributes, interactiveProps);
+      const hasInteractiveProps = interactiveProps
+        .some(prop => (
+          hasProp(attributes, prop)
+          && getPropValue(getProp(attributes, prop)) != null
+        ));
 
       if (!domElements.includes(type)) {
         // Do not test higher level JSX components, as we do not know what