Error label props defect (#397)

* Filter invalid dom properties from input error span

* Only pass all props down to custom error component

* v3.28.1

* Change how input and meta are pulled out

* Bump patch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "3.30.1",
+  "version": "3.30.2",
   "engines": {
     "node": "^8.0.0 || ^10.13.0"
   },

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 } from '../../utils'
+import { generateInputErrorId, filterInvalidDOMProps } from '../../utils'
 import { hasInputError } from '../helpers'
 
 /**
@@ -73,7 +73,7 @@ function InputError ({ error, invalid, touched, name, className, ...rest }) {
     ? <span
         id={ generateInputErrorId(name) }
         className={ classnames('error-message', className) }
-        { ...rest }
+        { ...filterInvalidDOMProps(rest) }
       >
         { formatError(error) }
       </span>

src/forms/labels/labeled-field.js

@@ -80,20 +80,22 @@ const defaultProps = {
 
 function LabeledField ({
   id,
-  input: { name },
-  meta: { error, touched, invalid },
+  input,
+  meta,
   className,
   errorComponent: ErrorComponent = InputError,
   labelComponent: LabelComponent = InputLabel,
   children,
   hideErrorLabel,
   ...rest
 }) {
+  const { name } = input
+  const { touched, invalid } = meta
   return (
     <fieldset className={ classnames(className, { 'error': hasInputError({ touched, invalid }) }) }>
       <LabelComponent { ...{ name, id, ...rest } } />
         { children }
-      { !hideErrorLabel && <ErrorComponent { ...{ error, invalid, touched, name, ...rest } } /> }
+      { !hideErrorLabel && <ErrorComponent {...{ ...input, ...meta, ...rest }} /> }
     </fieldset>
   )
 }

test/forms/labels/input-error.test.js

@@ -35,6 +35,12 @@ test('passes extra props to span element', () => {
   expect(wrapper.props().onClick).toBe(onClick)
 })
 
+test('filters invalid props passed to span element', () => {
+  const onClick = () => 'More info'
+  const wrapper = shallow(<InputError onClick={ onClick } onFancyClick={ onClick } error="Foo" touched invalid />)
+  expect(wrapper.props().onFancyClick).toBe(undefined)
+})
+
 test('is provided with an id containing the associated input name', () => {
   const inputName = "test-name"
   const wrapper = shallow(<InputError name={ inputName } invalid touched />)