Skip to content

Instantly share code, notes, and snippets.

@marr
Created June 20, 2018 01:18
Show Gist options
  • Save marr/738ba56765a08208fa3a416a9eb403a7 to your computer and use it in GitHub Desktop.
Save marr/738ba56765a08208fa3a416a9eb403a7 to your computer and use it in GitHub Desktop.
diff --git c/src/ui/form/InputField.css i/src/ui/form/InputField.css
index 088fbc98..7946478e 100644
--- c/src/ui/form/InputField.css
+++ i/src/ui/form/InputField.css
@@ -4,13 +4,24 @@
width: 100%;
}
-.inputField-input[type="text"] {
+.inputField-input[type="text"],
+.inputField-input[type="number"] {
width: 100%;
appearance: none;
- border: 1px solid $color-greySilver;
+ border-width: 1px;
+ border-style: solid;
+ border-color: $color-greySilver;
border-radius: 0;
color: $color-black;
+ .inputField--focus.inputField--green & {
+ border-color: $color-green;
+ }
+
+ .inputField--focus.inputField--purple & {
+ border-color: $color-purple;
+ }
+
&:focus {
outline: none;
}
diff --git c/src/ui/form/InputField.js i/src/ui/form/InputField.js
index b5ebca43..54b4a3c3 100644
--- c/src/ui/form/InputField.js
+++ i/src/ui/form/InputField.js
@@ -46,12 +46,26 @@ export class InputField extends Component {
type: PropTypes.string.isRequired, // when passing type="file" for file uploads, use <FileUploadButtonField />
};
+ state = {
+ hasFocus: false,
+ };
+
componentDidMount() {
if (this.props.isAutoFocused && this.$el) {
this.$el.focus();
}
}
+ handleBlur = e => {
+ this.setState({hasFocus: false});
+ this.props.input.onBlur(e);
+ };
+
+ handleFocus = e => {
+ this.setState({hasFocus: true});
+ this.props.input.onFocus(e);
+ };
+
handleClearButtonClick = () => {
this.props.input.onChange('');
};
@@ -83,9 +97,10 @@ export class InputField extends Component {
className={classNames(
!showErrorMessages && className,
'inputField',
- `inputField--${color}`,
`inputField--${size}`,
{
+ [`inputField--${color}`]: color,
+ 'inputField--focus': this.state.hasFocus,
'inputField--withErrorIcon': shouldShowErrorIcon,
'inputField--withClearButton': showClearButton,
'inputField--withError': showErrors,
@@ -101,6 +116,8 @@ export class InputField extends Component {
className={classNames('inputField-input', inputClassName)}
disabled={disabled}
id={id}
+ onBlur={this.handleBlur}
+ onFocus={this.handleFocus}
placeholder={placeholder}
type={type}
/>
diff --git c/src/ui/form/LabeledSelectField.js i/src/ui/form/LabeledSelectField.js
index 2b66d322..9c7f99ab 100644
--- c/src/ui/form/LabeledSelectField.js
+++ i/src/ui/form/LabeledSelectField.js
@@ -1,3 +1,5 @@
import SelectField from './SelectField';
import withLabel from './withLabel';
-export default withLabel(SelectField);
+import withErrorMessage from './withErrorMessage';
+
+export default withErrorMessage(withLabel(SelectField));
diff --git c/src/ui/form/SelectField.css i/src/ui/form/SelectField.css
index 759539ca..d5d34a84 100644
--- c/src/ui/form/SelectField.css
+++ i/src/ui/form/SelectField.css
@@ -13,12 +13,22 @@ $selectField-fontSize: 12px;
vertical-align: top;
position: relative;
padding-right: 29px;
- border: 1px solid $color-greySilver;
+ border-width: 1px;
+ border-style: solid;
+ border-color: $color-greySilver;
color: $color-black;
line-height: $selectField-height;
font-size: $selectField-fontSize;
height: $selectField-height;
+ &.selectField--focus.selectField--purple {
+ border-color: $color-purple;
+ }
+
+ &.selectField--focus.selectField--green {
+ border-color: $color-green;
+ }
+
&::before {
display: block;
content: "";
diff --git c/src/ui/form/SelectField.js i/src/ui/form/SelectField.js
index 2f099730..93f029b3 100644
--- c/src/ui/form/SelectField.js
+++ i/src/ui/form/SelectField.js
@@ -51,6 +51,9 @@ export class SelectField extends Component {
constructor(props, context) {
super(props, context);
this.lookup = this.buildOptionsLookup(props.options);
+ this.state = {
+ hasFocus: false,
+ };
}
componentWillReceiveProps(nextProps) {
@@ -67,12 +70,22 @@ export class SelectField extends Component {
}, {});
}
+ handleBlur = e => {
+ this.setState({hasFocus: false});
+ this.props.input.onBlur(e);
+ };
+
handleChange = e => {
const {onChange, input} = this.props;
onChange(e);
input.onChange(e);
};
+ handleFocus = e => {
+ this.setState({hasFocus: true});
+ this.props.input.onFocus(e);
+ };
+
render() {
const {
ariaLabelledby,
@@ -100,8 +113,9 @@ export class SelectField extends Component {
'selectField--withPadding': withPadding,
'selectField--withExtraPadding': withExtraPadding,
'selectField--disabled': disabled,
- 'selectField--purple': color === COLORS.PURPLE,
'selectField--error': shouldDisplayMetaError(meta),
+ 'selectField--focus': this.state.hasFocus,
+ [`selectField--${color}`]: color,
})}
>
<select
@@ -110,7 +124,9 @@ export class SelectField extends Component {
className="selectField-select"
disabled={disabled}
id={id}
+ onBlur={this.handleBlur}
onChange={this.handleChange}
+ onFocus={this.handleFocus}
>
{placeholder && <option value="">{placeholder}</option>}
{options.map(({key, label, value}) => (
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment