| ... |
... |
@@ -20,10 +20,13 @@ |
| 20 |
20 |
return template; |
| 21 |
21 |
} |
| 22 |
22 |
|
| 23 |
|
- |
| 24 |
24 |
get styles() { |
| 25 |
|
- return ``; |
|
24 |
+ return ''; |
| 26 |
26 |
} |
|
26 |
+ |
|
27 |
+ get html() { |
|
28 |
+ return ''; |
|
29 |
+ } |
| 27 |
27 |
$(selector) { |
| 28 |
28 |
return this.shadowRoot.querySelector(selector); |
| 29 |
29 |
} |
| ... |
... |
@@ -45,9 +45,12 @@ |
| 45 |
45 |
connectedCallback() { |
| 46 |
46 |
super.connectedCallback(); |
| 47 |
47 |
this.render(); |
|
51 |
+ const searchInput = this.$('input[type="text"]'); |
| 48 |
48 |
this.$('#search').addEventListener('click', this.handleSearch); |
| 49 |
49 |
this.$('#prev').addEventListener('click', this.handlePrevPage); |
| 50 |
50 |
this.$('#next').addEventListener('click', this.handleNextPage); |
|
55 |
+ searchInput.addEventListener('keypress', this.handleKeyPress); |
|
56 |
+ searchInput.focus(); |
| 51 |
51 |
} |
| 52 |
52 |
|
| 53 |
53 |
disconnectedCallback() { |
| ... |
... |
@@ -54,6 +54,7 @@ |
| 54 |
54 |
this.$('#search').removeEventListener('click', this.handleSearch); |
| 55 |
55 |
this.$('#prev').removeEventListener('click', this.handlePrevPage); |
| 56 |
56 |
this.$('#next').removeEventListener('click', this.handleNextPage); |
|
63 |
+ this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress); |
| 57 |
57 |
} |
| 58 |
58 |
|
| 59 |
59 |
get styles() { |
| ... |
... |
@@ -81,6 +81,11 @@ |
| 81 |
81 |
.then(this.renderResults); |
| 82 |
82 |
} |
| 83 |
83 |
|
|
91 |
+ handleKeyPress = (e) => { |
|
92 |
+ if(e.code === 'Enter') { |
|
93 |
+ this.handleSearch(); |
|
94 |
+ } |
|
95 |
+ } |
| 84 |
84 |
|
| 85 |
85 |
get html() { |
| 86 |
86 |
return ` |