diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js index 55d1f42b55..1b7d9fdd73 100644 --- a/src/components/views/elements/Field.js +++ b/src/components/views/elements/Field.js @@ -21,15 +21,15 @@ export default class Field extends React.PureComponent { static propTypes = { // The field's ID, which binds the input and label together. id: PropTypes.string.isRequired, - // The field's type. Defaults to "text". + // The element to create. Defaults to "input". + // To define options for a select, use + element: PropTypes.oneOf(["input", "select", "textarea"]), + // The field's type (when used as an ). Defaults to "text". type: PropTypes.string, // The field's label string. label: PropTypes.string, // The field's placeholder string. Defaults to the label. placeholder: PropTypes.string, - // The type of field to create. Defaults to "input". Should be "input" or "select". - // To define options for a select, use - element: PropTypes.string, // All other props pass through to the . }; @@ -46,21 +46,18 @@ export default class Field extends React.PureComponent { } render() { - const extraProps = Object.assign({}, this.props); + const { element, children, ...inputProps } = this.props; - // Remove explicit properties that shouldn't be copied - delete extraProps.element; - delete extraProps.children; + const inputElement = element || "input"; - // Set some defaults for the element - extraProps.type = extraProps.type || "text"; - extraProps.ref = "fieldInput"; - extraProps.placeholder = extraProps.placeholder || extraProps.label; + // Set some defaults for the element + inputProps.type = inputProps.type || "text"; + inputProps.ref = "fieldInput"; + inputProps.placeholder = inputProps.placeholder || inputProps.label; - const element = this.props.element || "input"; - const fieldInput = React.createElement(element, extraProps, this.props.children); + const fieldInput = React.createElement(inputElement, inputProps, children); - return
+ return
{fieldInput}
;