From 93ac35b8ee649e83354f60ffddba8b27335a8a4c Mon Sep 17 00:00:00 2001
From: Conor <conor@launchpadlab.com>
Date: Thu, 6 Feb 2020 17:36:23 -0600
Subject: [PATCH] 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                          | 2 +-
 src/forms/labels/input-error.js       | 4 ++--
 src/forms/labels/labeled-field.js     | 8 +++++---
 test/forms/labels/input-error.test.js | 6 ++++++
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index b6e08e8f..6c36bc06 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/forms/labels/input-error.js b/src/forms/labels/input-error.js
index b98b409a..18c10cee 100644
--- a/src/forms/labels/input-error.js
+++ b/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>
diff --git a/src/forms/labels/labeled-field.js b/src/forms/labels/labeled-field.js
index e88cebb7..3378a724 100644
--- a/src/forms/labels/labeled-field.js
+++ b/src/forms/labels/labeled-field.js
@@ -80,8 +80,8 @@ const defaultProps = {
 
 function LabeledField ({
   id,
-  input: { name },
-  meta: { error, touched, invalid },
+  input,
+  meta,
   className,
   errorComponent: ErrorComponent = InputError,
   labelComponent: LabelComponent = InputLabel,
@@ -89,11 +89,13 @@ function LabeledField ({
   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>
   )
 }
diff --git a/test/forms/labels/input-error.test.js b/test/forms/labels/input-error.test.js
index 9c93e0b2..9570de95 100644
--- a/test/forms/labels/input-error.test.js
+++ b/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 />)