From 410578d5710c1d884edd168afd838148b209e564 Mon Sep 17 00:00:00 2001
From: David Miculit <dmiculit@mozilla.com>
Date: Thu, 30 Apr 2026 14:08:51 +0300
Subject: [PATCH] fix: prevent the default form behaviour and only update the
 notes

---
 ui/perfherder/alerts/NotesModal.jsx | 35 +++++++++++++++++------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/ui/perfherder/alerts/NotesModal.jsx b/ui/perfherder/alerts/NotesModal.jsx
index e55a2b7af34..83470eb0484 100644
--- a/ui/perfherder/alerts/NotesModal.jsx
+++ b/ui/perfherder/alerts/NotesModal.jsx
@@ -6,7 +6,7 @@ export default class NotesModal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      inputValue: this.props.alertSummary.notes,
+      inputValue: this.props.alertSummary.notes || '',
     };
   }
 
@@ -14,8 +14,23 @@ export default class NotesModal extends React.Component {
     this.setState({ inputValue: event.target.value });
   };
 
+  handleSubmit = (event) => {
+    event.preventDefault();
+
+    const { updateAndClose } = this.props;
+    const { inputValue } = this.state;
+
+    updateAndClose(
+      event,
+      {
+        notes: inputValue.length ? inputValue : null,
+      },
+      'showNotesModal',
+    );
+  };
+
   render() {
-    const { showModal, toggle, alertSummary, updateAndClose } = this.props;
+    const { showModal, toggle, alertSummary } = this.props;
     const { inputValue } = this.state;
 
     return (
@@ -23,12 +38,13 @@ export default class NotesModal extends React.Component {
         <Modal.Header closeButton>
           <Modal.Title>Alert Notes</Modal.Title>
         </Modal.Header>
-        <Form>
+        <Form onSubmit={this.handleSubmit}>
           <Modal.Body>
             <Form.Group>
               <Form.Label htmlFor="editableNotes">Add or edit notes</Form.Label>
               <Form.Control
-                value={inputValue || ''}
+                id="editableNotes"
+                value={inputValue}
                 onChange={this.updateInput}
                 name="editableNotes"
                 as="textarea"
@@ -40,16 +56,7 @@ export default class NotesModal extends React.Component {
           <Modal.Footer>
             <Button
               variant="secondary"
-              onClick={(event) =>
-                updateAndClose(
-                  event,
-                  {
-                    notes: inputValue.length ? inputValue : null,
-                  },
-                  'showNotesModal',
-                )
-              }
-              disabled={inputValue === alertSummary.notes}
+              disabled={inputValue === (alertSummary.notes || '')}
               type="submit"
             >
               Save