fix css a bit and submit on enter press

This commit is contained in:
Jonathan Rainville 2018-10-16 16:17:06 -04:00 committed by Pascal Precht
parent 56ebd94d6d
commit 224a5bd3fd
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
2 changed files with 15 additions and 3 deletions

View File

@ -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() {
return (
<Row>
@ -27,8 +38,8 @@ class SearchBar extends React.Component {
<Form inline className="search-bar float-right">
<FormGroup>
<Input type="text" name="search-bar" placeholder="Search" onChange={(e) => this.onChange(e)}
value={this.state.searchValue}/>
<Button color="secondary" onClick={() => this.props.searchSubmit(this.state.searchValue)}>
value={this.state.searchValue} onKeyPress={e => this.onKeyPress(e)}/>
<Button color="secondary" onClick={(e) => this.onSubmit(e)}>
<FontAwesome name="search"/>
</Button>
</FormGroup>

View File

@ -1,11 +1,12 @@
.search-bar {
margin-top: 10px;
margin: 10px 0;
}
.search-bar input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border: 0;
outline: none;
}
.search-bar button {