Trigger find on Enter key in FindOwnersView

spring-petclinic · Sep 30, 2021 · fc22020 · fc22020
1 parent 3e53d5d
commit fc22020
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/frontend/views/owners/find-owners-view.ts b/frontend/views/owners/find-owners-view.ts
@@ -22,7 +22,14 @@ export class FindOwnersView extends View {
     return html`
       <h2>Find Owners</h2>
       
-      <vaadin-text-field label="Last name" .value="${this.lastName}" @change="${this.lastNameChanged}" helper-text="${this.hintText}" clear-button-visible>
+      <vaadin-text-field
+        label="Last name"
+        .value="${this.lastName}"
+        @change="${this.lastNameChanged}"
+        @keyup="${this.textFieldKeyUp}"
+        helper-text="${this.hintText}"
+        clear-button-visible
+      >
         <vaadin-icon slot="prefix" icon="vaadin:search"></vaadin-icon>
       </vaadin-text-field>
       <vaadin-button @click="${this.findOwner}">Find Owner</vaadin-button><br>
@@ -36,6 +43,12 @@ export class FindOwnersView extends View {
     this.lastName = textField.value;
   }
 
+  textFieldKeyUp(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      this.findOwner();
+    }
+  }
+
   findOwner() {
     let targetUrl = router.urlForName('owners-list');
     if (this.lastName !== '') {