Repository: inovex/scrumlr.io
Pull request #1881 (2022-06-22 14:53:28)

Fix note dialog content


Patch:
diff --git a/src/components/NoteDialog/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.scss b/src/components/NoteDialog/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.scss
index 94e7b7cf..e549c262 100644
--- a/src/components/NoteDialog/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.scss
+++ b/src/components/NoteDialog/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.scss
@@ -23,7 +23,7 @@
   outline: none;
   resize: none;
 }
-.note-dialog__note-content__text:enabled {
+.note-dialog__note-content__text[contentEditable] {
   &:hover,
   &:focus {
     border-color: rgba(var(--accent-color-rgb), 0.3);
diff --git a/src/components/NoteDialog/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.tsx b/src/components/NoteDialog/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.tsx
index f162f90f..7be2507f 100644
--- a/src/components/NoteDialog/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.tsx
+++ b/src/components/NoteDialog/NoteDialogComponents/NoteDialogNoteComponents/NoteDialogNoteContent.tsx
@@ -12,6 +12,7 @@ type NoteDialogNoteContentProps = {
   viewer: Participant;
 };
 
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 export const NoteDialogNoteContent: FC<NoteDialogNoteContentProps> = ({noteId, authorId, text, viewer}: NoteDialogNoteContentProps) => {
   const dispatch = useDispatch();
   const editable = viewer.user.id === authorId || viewer.role === "OWNER" || viewer.role === "MODERATOR";
@@ -24,14 +25,13 @@ export const NoteDialogNoteContent: FC<NoteDialogNoteContentProps> = ({noteId, a
 
   return (
     <div className="note-dialog__note-content">
-      <textarea
+      <blockquote
         tabIndex={editable ? 0 : -1}
         className={classNames("note-dialog__note-content__text", {".note-dialog__note-content__text-hover": editable})}
-        disabled={!editable}
+        contentEditable={editable}
         suppressContentEditableWarning
-        defaultValue={text}
         onBlur={(e) => {
-          onEdit(noteId!, e.target.value ?? "");
+          onEdit(noteId!, e.target.textContent ?? "");
         }}
         onKeyDown={(e) => {
           if (e.key === "Enter") {
@@ -39,7 +39,9 @@ export const NoteDialogNoteContent: FC<NoteDialogNoteContentProps> = ({noteId, a
             (e.target as HTMLTextAreaElement).blur();
           }
         }}
-      />
+      >
+        {text}
+      </blockquote>
     </div>
   );
 };


Test patch:
diff --git a/src/components/Note/__tests__/__snapshots__/Note.test.tsx.snap b/src/components/Note/__tests__/__snapshots__/Note.test.tsx.snap
index 609065c0..d83849e9 100644
--- a/src/components/Note/__tests__/__snapshots__/Note.test.tsx.snap
+++ b/src/components/Note/__tests__/__snapshots__/Note.test.tsx.snap
@@ -540,13 +540,13 @@ exports[`Note Test NoteDialog created/not created NoteDialog is present: snapsho
                   <div
                     class="note-dialog__note-content"
                   >
-                    <textarea
+                    <blockquote
                       class="note-dialog__note-content__text"
-                      disabled=""
+                      contenteditable="false"
                       tabindex="-1"
                     >
                       Lorem Ipsum
-                    </textarea>
+                    </blockquote>
                   </div>
                   <div
                     class="note-dialog__note-footer"
diff --git a/src/components/NoteDialog/__tests__/NoteDialog.test.tsx b/src/components/NoteDialog/__tests__/NoteDialog.test.tsx
index d8cea4f3..b7d9d098 100644
--- a/src/components/NoteDialog/__tests__/NoteDialog.test.tsx
+++ b/src/components/NoteDialog/__tests__/NoteDialog.test.tsx
@@ -126,7 +126,7 @@ describe("<NoteDialog/>", () => {
         useDispatchSpy.mockReturnValue(mockDispatchFn);
         const {container} = render(createNoteDialog({authorId: "test-participant-id"}), {container: global.document.querySelector("#portal")!});
         const noteContentText = container.querySelector(".note-dialog__note-content__text")!;
-        fireEvent.blur(noteContentText, {target: {value: "Changed Text"}});
+        fireEvent.blur(noteContentText, {target: {textContent: "Changed Text"}});
 
         await waitFor(() => {
           expect(mockDispatchFn).toHaveBeenCalledWith(Actions.editNote("0", {text: "Changed Text"}));
@@ -139,7 +139,7 @@ describe("<NoteDialog/>", () => {
         useDispatchSpy.mockReturnValue(mockDispatchFn);
         const {container} = render(createNoteDialog({currentUserIsModerator: true}), {container: global.document.querySelector("#portal")!});
         const noteContentText = container.querySelector(".note-dialog__note-content__text")!;
-        fireEvent.blur(noteContentText, {target: {value: "Changed Text"}});
+        fireEvent.blur(noteContentText, {target: {textContent: "Changed Text"}});
 
         await waitFor(() => {
           expect(mockDispatchFn).toHaveBeenCalledWith(Actions.editNote("0", {text: "Changed Text"}));
diff --git a/src/components/NoteDialog/__tests__/__snapshots__/NoteDialog.test.tsx.snap b/src/components/NoteDialog/__tests__/__snapshots__/NoteDialog.test.tsx.snap
index c409d73d..28e119e3 100644
--- a/src/components/NoteDialog/__tests__/__snapshots__/NoteDialog.test.tsx.snap
+++ b/src/components/NoteDialog/__tests__/__snapshots__/NoteDialog.test.tsx.snap
@@ -19,13 +19,13 @@ exports[`<NoteDialog/> should render correctly note-dialog match snapshot 1`] =
         <div
           class="note-dialog__note-content"
         >
-          <textarea
+          <blockquote
             class="note-dialog__note-content__text"
-            disabled=""
+            contenteditable="false"
             tabindex="-1"
           >
             Test Text
-          </textarea>
+          </blockquote>
         </div>
         <div
           class="note-dialog__note-footer"
@@ -525,9 +525,9 @@ exports[`<NoteDialog/> should render correctly note-dialog match snapshot 1`] =
         <div
           class="note-dialog__note-content"
         >
-          <textarea
+          <blockquote
             class="note-dialog__note-content__text"
-            disabled=""
+            contenteditable="false"
             tabindex="-1"
           />
         </div>
@@ -972,9 +972,9 @@ exports[`<NoteDialog/> should render correctly note-dialog match snapshot 1`] =
         <div
           class="note-dialog__note-content"
         >
-          <textarea
+          <blockquote
             class="note-dialog__note-content__text"
-            disabled=""
+            contenteditable="false"
             tabindex="-1"
           />
         </div>