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() { 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>

View File

@ -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 {