diff --git a/app/assets/javascripts/code_listing/code_listing.ts b/app/assets/javascripts/code_listing/code_listing.ts
index d69649b2f8..52fbcd25a7 100644
--- a/app/assets/javascripts/code_listing/code_listing.ts
+++ b/app/assets/javascripts/code_listing/code_listing.ts
@@ -390,8 +390,8 @@ export class CodeListing {
                 invalidateSavedAnnotation(e.detail.savedAnnotationId);
                 annotationForm.remove();
             } catch (err) {
-                annotationForm.hasErrors= true;
-                annotationForm.disabled= false;
+                annotationForm.hasErrors = true;
+                annotationForm.disabled = false;
             }
         });
 
diff --git a/app/assets/javascripts/components/annotations/annotation_form.ts b/app/assets/javascripts/components/annotations/annotation_form.ts
index b100bfde9d..b9669028fb 100644
--- a/app/assets/javascripts/components/annotations/annotation_form.ts
+++ b/app/assets/javascripts/components/annotations/annotation_form.ts
@@ -55,6 +55,7 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
     saveAnnotation = false;
 
     inputRef: Ref<HTMLTextAreaElement> = createRef();
+    titleRef: Ref<HTMLInputElement> = createRef();
 
     watch = {
         annotation: () => {
@@ -134,9 +135,8 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
         }
     }
 
-    handleUpdateTitle(e: Event): void {
-        this.savedAnnotationTitle = (e.target as HTMLInputElement).value;
-        e.stopPropagation();
+    handleUpdateTitle(): void {
+        this.savedAnnotationTitle = this.titleRef.value.value;
     }
 
     firstUpdated(): void {
@@ -206,8 +206,15 @@ export class AnnotationForm extends watchMixin(ShadowlessLitElement) {
                             <label class="form-label" for="saved-annotation-title">
                                 ${I18n.t("js.saved_annotation.title")}
                             </label>
-                            <input required="required" class="form-control" type="text"
-                                   @change=${e => this.handleUpdateTitle(e)} value=${this.savedAnnotationTitle} id="saved-annotation-title">
+                            <input required="required"
+                                   class="form-control"
+                                   type="text"
+                                   ${ref(this.titleRef)}
+                                   @keydown="${e => this.handleKeyDown(e)}"
+                                   @input=${() => this.handleUpdateTitle()}
+                                   value=${this.savedAnnotationTitle}
+                                   id="saved-annotation-title"
+                            >
                         </div>
                     ` : html``}
                 `}