PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Correctly form a select/input element

Browse source
This commit is contained in:
Travis Ralston 2019-01-22 20:03:59 -07:00
parent f0e8182ff3
commit 2b3c8c4450
2 changed files with 8 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
res/css/views/elements/_Field.scss
View file

@ -36,14 +36,12 @@ limitations under the License.
border-color: $input-focused-border-color; 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; transition: color 0.25s ease-in 0s;
color: transparent; 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; transition: color 0.25s ease-in 0.1s;
color: $greyed-fg-color; color: $greyed-fg-color;
} }
@ -66,8 +64,7 @@ limitations under the License.
.mx_Field input:focus + label, .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:focus + label {
.mx_Field select:not(:placeholder-shown) + label {
transition: transition:
font-size 0.25s ease-out 0s, font-size 0.25s ease-out 0s,
color 0.25s ease-out 0s, color 0.25s ease-out 0s,

10
src/components/views/elements/Field.js
View file

@ -36,12 +36,12 @@ export default class Field extends React.PureComponent {
render() { render() {
const extraProps = Object.assign({}, this.props); const extraProps = Object.assign({}, this.props);
// Remove explicit props // Remove explicit properties that shouldn't be copied
delete extraProps.id;
delete extraProps.type;
delete extraProps.placeholder;
delete extraProps.label;
delete extraProps.element; delete extraProps.element;
delete extraProps.children;
// Set some defaults for the element
extraProps.type = extraProps.type || "text";
const element = this.props.element || "input"; const element = this.props.element || "input";
const fieldInput = React.createElement(element, extraProps, this.props.children); const fieldInput = React.createElement(element, extraProps, this.props.children);