matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-08 21:42:24 +03:00
Code Activity

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
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);