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