Filter invalid span props

package.json

@@ -45,6 +45,8 @@
     "cleave.js": "^1.6.0",
     "date-fns": "^2.28.0",
     "filter-invalid-dom-props": "^2.1.0",
+    "html-attributes": "^1.1.0",
+    "html-element-attributes": "^3.1.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
     "react-color": "^2.19.3",

src/forms/labels/input-error.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { generateInputErrorId, filterInvalidDOMProps } from '../../utils'
+import { generateInputErrorId, filterInvalidHtmlProps } from '../../utils'
 import { hasInputError } from '../helpers'
 
 /**
@@ -75,7 +75,7 @@ function InputError({ error, invalid, touched, name, className, ...rest }) {
     <span
       id={generateInputErrorId(name)}
       className={classnames('error-message', className)}
-      {...filterInvalidDOMProps(rest)}
+      {...filterInvalidHtmlProps('span', rest)}
     >
       {formatError(error)}
     </span>

src/utils/local/filter-invalid-html-props.js

@@ -0,0 +1,54 @@
+import { htmlElementAttributes } from 'html-element-attributes'
+import htmlAttributes from 'html-attributes' // An object of all HTML attributes with the JSX prop (e.g., "className", "tabIndex") as keys and the JavaScript prop (e.g., "class", "tabindex") as values
+import { difference, omitBy, compact, concat } from 'lodash'
+import filterInvalidDOMProps from 'filter-invalid-dom-props'
+
+// An array of basic HTML _global_ attributes (note: this does not include event handlers, "aria-", "role", and "data-")
+const basicGlobalAttributes = htmlElementAttributes['*']
+// An array of all existing HTML attributes (note: this does not include event handlers, "aria-" and "data-")
+const allHtmlAttributes = Object.values(htmlAttributes)
+
+/**
+ *
+ * A function that filters out props 1) that are not recognized as a valid HTML attribute
+ * and 2) that are valid HTML attributes but not allowed for the provided element.
+ *
+ * @param {String} element - HTML element
+ * @param {Object} props - React props that are set on the HTML element
+ * @returns {Object} - React props that are valid for the HTML element
+ *
+ * @example
+ *
+ * const rest = { form: "planDetailsForm", type: "text", placeholder: "Enter plan name", showField: true }
+ * <span id="planNameError" className="error-message" {...filterInvalidHtmlProps("span", rest)}>
+ *   This field is required!
+ * </span>
+ *
+ * // <span id="planNameError" class="error-message">
+ * //   This field is required!
+ * // </span>
+ *
+ */
+
+function filterInvalidHtmlProps(element, props) {
+  // This util (filterInvalidDOMProps) covers event handlers such as "onClick" and props that begin with "data-" and "aria-"
+  // but it does not filter out HTML attributes that are not allowed for the element in question
+  const validDOMProps = filterInvalidDOMProps(props)
+
+  const notAllowedAttributes = generateNotAllowedAttributes(element)
+  return omitBy(validDOMProps, (_, key) =>
+    notAllowedAttributes.includes(htmlAttributes[key])
+  )
+}
+
+// ----- PRIVATE ------
+// Returns an array of all existing HTML attributes (in plain JavaScript) that are not allowed for the given element
+function generateNotAllowedAttributes(element) {
+  const additionalAllowedAttributes = htmlElementAttributes[element] // e.g., ul => ['compact', 'type']
+  const allAllowedAttributes = compact(
+    concat(basicGlobalAttributes, 'role', additionalAllowedAttributes)
+  )
+  return difference(allHtmlAttributes, allAllowedAttributes)
+}
+
+export default filterInvalidHtmlProps

src/utils/local/index.js

@@ -8,3 +8,4 @@ export stripNamespace from './strip-namespace'
 export triggerOnKeys from './trigger-on-keys'
 export KeyCodes from './key-codes'
 export useToggle from './use-toggle'
+export filterInvalidHtmlProps from './filter-invalid-html-props'

yarn.lock

@@ -8109,11 +8109,16 @@ hosted-git-info@^4.0.0, hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
-html-attributes@1.1.0:
+html-attributes@1.1.0, html-attributes@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/html-attributes/-/html-attributes-1.1.0.tgz#82027a4fac7a6070ea6c18cc3886aea18d6dea09"
   integrity sha1-ggJ6T6x6YHDqbBjMOIauoY1t6gk=
 
+html-element-attributes@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/html-element-attributes/-/html-element-attributes-3.1.0.tgz#07869037b9020bec3bb1897263e97dd65829d15b"
+  integrity sha512-cHM9qM06tyWHwvGqDqVEBwoYtGgyq7X/GQt3dor38M1hYMZw1yVadaDQrwwQer6NefiYAoHaqFARI8ETMCAOYA==
+
 html-element-map@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.3.1.tgz#44b2cbcfa7be7aa4ff59779e47e51012e1c73c08"