Merge pull request #2484 from matrix-org/travis/select-field

Support selects on Field

res/css/views/elements/_Field.scss

@@ -21,15 +21,17 @@ limitations under the License.
     margin: 1em 0;
 }
 
-.mx_Field input {
+.mx_Field input,
+.mx_Field select {
     font-weight: normal;
     border-radius: 4px;
     transition: border-color 0.25s;
     border: 1px solid $input-border-color;
     padding: 8px 9px;
 }
 
-.mx_Field input:focus {
+.mx_Field input:focus,
+.mx_Field select:focus {
     outline: 0;
     border-color: $input-focused-border-color;
 }
@@ -61,7 +63,8 @@ limitations under the License.
 }
 
 .mx_Field input:focus + label,
-.mx_Field input:not(:placeholder-shown) + label {
+.mx_Field input:not(:placeholder-shown) + label,
+.mx_Field select:focus + label {
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,
@@ -72,6 +75,7 @@ limitations under the License.
     background-color: $field-focused-label-bg-color;
 }
 
-.mx_Field input:focus + label {
+.mx_Field input:focus + label,
+.mx_Field select:focus + label {
     color: $input-focused-border-color;
 }

src/components/views/elements/Field.js

@@ -27,24 +27,27 @@ export default class Field extends React.PureComponent {
         label: PropTypes.string,
         // The field's placeholder string.
         placeholder: PropTypes.string,
+        // The type of field to create. Defaults to "input". Should be "input" or "select".
+        // To define options for a select, use <Field><option ... /></Field>
+        element: PropTypes.string,
         // All other props pass through to the <input>.
     }
 
     render() {
         const extraProps = Object.assign({}, this.props);
 
-        // Remove explicit props
-        delete extraProps.id;
-        delete extraProps.type;
-        delete extraProps.placeholder;
-        delete extraProps.label;
+        // Remove explicit properties that shouldn't be copied
+        delete extraProps.element;
+        delete extraProps.children;
+
+        // Set some defaults for the element
+        extraProps.type = extraProps.type || "text";
+
+        const element = this.props.element || "input";
+        const fieldInput = React.createElement(element, extraProps, this.props.children);
 
         return <div className="mx_Field">
-            <input id={this.props.id}
-                type={this.props.type || "text"}
-                placeholder={this.props.placeholder}
-                {...extraProps}
-            />
+            {fieldInput}
             <label htmlFor={this.props.id}>{this.props.label}</label>
         </div>;
     }