fix css a bit and submit on enter press
This commit is contained in:
parent
56ebd94d6d
commit
224a5bd3fd
|
@ -20,6 +20,17 @@ class SearchBar extends React.Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.props.searchSubmit(this.state.searchValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyPress(e) {
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
this.onSubmit(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
|
@ -27,8 +38,8 @@ class SearchBar extends React.Component {
|
||||||
<Form inline className="search-bar float-right">
|
<Form inline className="search-bar float-right">
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Input type="text" name="search-bar" placeholder="Search" onChange={(e) => this.onChange(e)}
|
<Input type="text" name="search-bar" placeholder="Search" onChange={(e) => this.onChange(e)}
|
||||||
value={this.state.searchValue}/>
|
value={this.state.searchValue} onKeyPress={e => this.onKeyPress(e)}/>
|
||||||
<Button color="secondary" onClick={() => this.props.searchSubmit(this.state.searchValue)}>
|
<Button color="secondary" onClick={(e) => this.onSubmit(e)}>
|
||||||
<FontAwesome name="search"/>
|
<FontAwesome name="search"/>
|
||||||
</Button>
|
</Button>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
|
|
@ -1,11 +1,12 @@
|
||||||
.search-bar {
|
.search-bar {
|
||||||
margin-top: 10px;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar input {
|
.search-bar input {
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-bar button {
|
.search-bar button {
|
||||||
|
|
Loading…
Reference in New Issue