fix(text-field): allow for input isValid override (#374)

Author: Matt Goo

packages/text-field/Input.js

@@ -142,7 +142,12 @@ export default class Input extends React.Component {
   }
 
   isBadInput = () => this.inputElement.current.validity.badInput;
-  isValid = () => this.inputElement.current.validity.valid;
+  isValid = () => {
+    if (this.props.isValid !== undefined) {
+      return this.props.isValid;
+    }
+    return this.inputElement.current.validity.valid;
+  }
 
   render() {
     const {
@@ -151,6 +156,7 @@ export default class Input extends React.Component {
       /* eslint-disable no-unused-vars */
       className,
       foundation,
+      isValid,
       value,
       handleFocusChange,
       handleValueChange,
@@ -186,6 +192,7 @@ Input.propTypes = {
   className: PropTypes.string,
   inputType: PropTypes.string,
   disabled: PropTypes.bool,
+  isValid: PropTypes.bool,
   foundation: PropTypes.shape({
     activateFocus: PropTypes.func,
     deactivateFocus: PropTypes.func,
@@ -215,6 +222,7 @@ Input.defaultProps = {
   className: '',
   inputType: 'input',
   disabled: false,
+  isValid: undefined,
   foundation: {
     activateFocus: () => {},
     deactivateFocus: () => {},

packages/text-field/README.md

@@ -83,6 +83,7 @@ className | String | Classes to be applied to the input element.
 disabled | Function | Disables the input and the parent text field.
 foundation | Function | The text field foundation.
 handleValueChange | Function | A callback function to update React Text Field's value.
+isValid | Boolean | If set, this value will override the native input's validation.
 id | String | The `<input>` id attribute.
 onBlur | Function | Blur event handler.
 onChange | Function | Change event handler.

test/unit/text-field/Input.test.js

@@ -40,6 +40,30 @@ test('#isValid returns false if input is invalid', () => {
   assert.isFalse(isValidInput);
 });
 
+test('#isValid returns true if prop.isValid is set to true', () => {
+  const wrapper = mount(<Input value='m' pattern='[a-z]' isValid />);
+  const isValidInput = wrapper.instance().isValid();
+  assert.isTrue(isValidInput);
+});
+
+test('#isValid returns false if prop.isValid is set to false', () => {
+  const wrapper = mount(<Input value='m' pattern='[a-z]' isValid={false} />);
+  const isValidInput = wrapper.instance().isValid();
+  assert.isFalse(isValidInput);
+});
+
+test('#isValid returns false if prop.isValid is set to false and input is invalid', () => {
+  const wrapper = mount(<Input value='meow' pattern='[a-z]' isValid={false}/>);
+  const isValidInput = wrapper.instance().isValid();
+  assert.isFalse(isValidInput);
+});
+
+test('#isValid returns true if prop.isValid is set to true and input is invalid', () => {
+  const wrapper = mount(<Input value='meow' pattern='[a-z]' isValid/>);
+  const isValidInput = wrapper.instance().isValid();
+  assert.isTrue(isValidInput);
+});
+
 test('#componentDidMount should call props.setInputId if props.id exists', () => {
   const setInputId = td.func();
   shallow(<Input setInputId={setInputId} id='best-id'/>);
@@ -82,6 +106,14 @@ test('#componentDidMount calls props.handleValueChange when the foundation initi
   td.verify(handleValueChange(value, td.matchers.isA(Function)), {times: 1});
 });
 
+test('#componentDidMount does not call props.handleValueChange when there is no props.value', () => {
+  const handleValueChange = td.func();
+  shallow(<Input
+    handleValueChange={handleValueChange}
+  />);
+  td.verify(handleValueChange(td.matchers.anything(), td.matchers.isA(Function)), {times: 0});
+});
+
 test('change to minLength calls handleValidationAttributeChange', () => {
   const handleValidationAttributeChange = td.func();
   const wrapper = shallow(<Input foundation={{handleValidationAttributeChange}} />);