From f0e8182ff362c6f4352b6baabd081fb66126a550 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 22 Jan 2019 19:25:09 -0700
Subject: [PATCH 1/2] Support selects on Field

Luckily, the styling is copy/paste capable.
---
 res/css/views/elements/_Field.scss     | 19 +++++++++++++------
 src/components/views/elements/Field.js | 13 ++++++++-----
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index c728f4bcd4..1fcd238c23 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -21,7 +21,8 @@ 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;
@@ -29,17 +30,20 @@ limitations under the License.
     padding: 8px 9px;
 }
 
-.mx_Field input:focus {
+.mx_Field input:focus,
+.mx_Field select:focus {
     outline: 0;
     border-color: $input-focused-border-color;
 }
 
-.mx_Field input::placeholder {
+.mx_Field input::placeholder,
+.mx_Field select::placeholder {
     transition: color 0.25s ease-in 0s;
     color: transparent;
 }
 
-.mx_Field input:placeholder-shown:focus::placeholder {
+.mx_Field input:placeholder-shown:focus::placeholder,
+.mx_Field select:placeholder-shown:focus::placeholder {
     transition: color 0.25s ease-in 0.1s;
     color: $greyed-fg-color;
 }
@@ -61,7 +65,9 @@ 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,
+.mx_Field select:not(:placeholder-shown) + label {
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,
@@ -72,6 +78,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;
 }
diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js
index 428c7f1d6c..896eff5918 100644
--- a/src/components/views/elements/Field.js
+++ b/src/components/views/elements/Field.js
@@ -27,6 +27,9 @@ 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>.
     }
 
@@ -38,13 +41,13 @@ export default class Field extends React.PureComponent {
         delete extraProps.type;
         delete extraProps.placeholder;
         delete extraProps.label;
+        delete extraProps.element;
+
+        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>;
     }

From 2b3c8c44503c03fbc3557e8b5c26587dafb8e313 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 22 Jan 2019 20:03:59 -0700
Subject: [PATCH 2/2] Correctly form a select/input element

---
 res/css/views/elements/_Field.scss     |  9 +++------
 src/components/views/elements/Field.js | 10 +++++-----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss
index 1fcd238c23..4f6e868249 100644
--- a/res/css/views/elements/_Field.scss
+++ b/res/css/views/elements/_Field.scss
@@ -36,14 +36,12 @@ limitations under the License.
     border-color: $input-focused-border-color;
 }
 
-.mx_Field input::placeholder,
-.mx_Field select::placeholder {
+.mx_Field input::placeholder {
     transition: color 0.25s ease-in 0s;
     color: transparent;
 }
 
-.mx_Field input:placeholder-shown:focus::placeholder,
-.mx_Field select:placeholder-shown:focus::placeholder {
+.mx_Field input:placeholder-shown:focus::placeholder {
     transition: color 0.25s ease-in 0.1s;
     color: $greyed-fg-color;
 }
@@ -66,8 +64,7 @@ limitations under the License.
 
 .mx_Field input:focus + label,
 .mx_Field input:not(:placeholder-shown) + label,
-.mx_Field select:focus + label,
-.mx_Field select:not(:placeholder-shown) + label {
+.mx_Field select:focus + label {
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,
diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js
index 896eff5918..69b890b911 100644
--- a/src/components/views/elements/Field.js
+++ b/src/components/views/elements/Field.js
@@ -36,12 +36,12 @@ export default class Field extends React.PureComponent {
     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);