[NoteButton] Use multiline text field for wordwrap (#4157)

Author: imnasnainaec

src/components/Buttons/NoteButton.tsx

@@ -64,6 +64,7 @@ export default function NoteButton(props: NoteButtonProps): ReactElement {
         buttonIdCancel="note-edit-cancel"
         buttonIdClear="note-edit-clear"
         buttonIdConfirm="note-edit-confirm"
+        multiline
         textFieldId="note-text-field"
       />
     </>

src/components/Dialogs/EditTextDialog.tsx

@@ -31,6 +31,7 @@ interface EditTextDialogProps {
   buttonIdConfirm?: string;
   buttonTextIdCancel?: string;
   buttonTextIdConfirm?: string;
+  multiline?: boolean;
   textFieldId?: string;
 }
 
@@ -70,6 +71,10 @@ export default function EditTextDialog(
 
   function confirmIfEnter(event: KeyboardEvent<any>): void {
     if (event.key === Key.Enter) {
+      // Prevent newline in note. If we want to enable newlines (when multiline
+      // is true), we'll need to manage Enter vs (e.g.) Shift+Enter and which
+      // one confirms vs adds a newline.
+      event.preventDefault();
       onConfirm();
     }
   }
@@ -101,28 +106,27 @@ export default function EditTextDialog(
           variant="standard"
           autoFocus
           value={text}
+          multiline={props.multiline}
           onChange={(event) => setText(event.target.value)}
-          onKeyPress={confirmIfEnter}
+          onKeyDown={confirmIfEnter}
           slotProps={{ input: { endAdornment } }}
           id={props.textFieldId}
         />
       </DialogContent>
       <DialogActions>
         <Button
-          onClick={onCancel}
-          variant="outlined"
-          color="primary"
           data-testid={props.buttonIdCancel}
           id={props.buttonIdCancel}
+          onClick={onCancel}
+          variant="outlined"
         >
           {t(props.buttonTextIdCancel ?? "buttons.cancel")}
         </Button>
         <Button
-          onClick={onConfirm}
-          variant="outlined"
-          color="primary"
           data-testid={props.buttonIdConfirm}
           id={props.buttonIdConfirm}
+          onClick={onConfirm}
+          variant="contained"
         >
           {t(props.buttonTextIdConfirm ?? "buttons.confirm")}
         </Button>