I'm working with a library of react components that provide validation for redux-form fields. My problem is they don't pass html input attributes through to the input elements they render. What needs to change to allow them pass attributes such as size or maxLength through to the input element?
Here is how I'm using one of these components:
<Field
component={TextInput}
type="text"
required={true}
initialValue={this.props.initialValues.name}
name="name"
id="name"
size="65"
maxLength="100"
/>
This is code that defines TextInput:
import React from 'react';
import PropTypes from 'prop-types';
import { FormControl, FormGroup, HelpBlock, InputGroup } from 'react-bootstrap';
import { validateField } from '../../decorators/forms/validates';
import { inputPropTypes, getInputProps } from './props';
function Input(props) {
const errors = props.messages.map((msg) => <HelpBlock key={msg}>{msg}</HelpBlock>);
return (
<FormGroup
validationState={props.validationState}
>
<InputGroup>
<FormControl
{...getInputProps(props)}
/>
</InputGroup>
{errors}
</FormGroup>
);
}
Input.defaultProps = {
type: 'text',
};
Input.propTypes = inputPropTypes;
/**
* A component that allows entering text.
* Default validation options: `{sanitizers: ['trim']}`
* Default props: `{type: 'text'}`
* @namespace TextInput
* @memberof Simpl.components.forms
* @type {ReactElement}
* @extends React.Component
*/
export const TextInput = validateField({
sanitizers: ['trim'],
})(Input);
export default TextInput;
This is the code that defines getInputProps():
import React from 'react';
import PropTypes from 'prop-types';
export const inputPropTypes = {
errors: PropTypes.array,
warning: PropTypes.array,
sanitizers: PropTypes.array,
formatters: PropTypes.array,
messages: PropTypes.array,
validationState: PropTypes.string,
id: PropTypes.string,
name: PropTypes.string.isRequired,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onFocus: PropTypes.func,
readOnly: PropTypes.bool,
required: PropTypes.bool,
type: PropTypes.string,
value: PropTypes.any,
disabled: PropTypes.bool,
};
export const reduxFormPropTypes = {
error: PropTypes.any,
handleSubmit: PropTypes.func,
input: PropTypes.object,
label: PropTypes.string,
meta: PropTypes.object,
pristine: PropTypes.bool,
reset: PropTypes.func,
submitting: PropTypes.bool,
type: PropTypes.string,
};
export function getInputProps(props) {
return {
id: props.id,
name: props.name,
onBlur: props.onBlur,
onChange: props.onChange,
onFocus: props.onFocus,
readOnly: props.readOnly,
required: props.required,
type: props.type,
value: props.value,
max: props.min,
min: props.max,
step: props.step,
};
}
===========================
After adapting Tomasz suggested change to getInputProps to also strip out non-input attributes from props:
export function getInputProps(props) {
const inputProps = Object.assign({}, props);
delete inputProps.messages;
delete inputProps.validationState;
delete inputProps.hasReduxForm;
delete inputProps.decimalPlaces;
return inputProps;
}
the input elements generated by FormControl still don't have the size and maxLength attributes. This seems like a step in the right direction though.
Logging the props passed to the TextInput, made it clear the size and maxLength properties are not reaching it. So how does one get redux-form to pass through the extra input attributes?
ADDED 09-OCT-2017 ++++++++++
I tried adding the extra input attributes to a Field tag props attribute. They still didn't get passed in to my component.
As a last resort, I created a copy of my component that defines default values for the extra input properties. This fixes my immediate problem, but doesn't answer this question.