Enabled save button only when link is changed

matrix-org · Jan 6, 2023 · 7674548 · 7674548
1 parent e532205
commit 7674548
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx b/src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx
@@ -58,8 +58,9 @@ interface LinkModalProps {
 }
 
 export function LinkModal({ composer, isTextEnabled, onClose, composerContext, isEditing }: LinkModalProps) {
+    const [hasLinkChanged, setHasLinkChanged] = useState(false);
     const [fields, setFields] = useState({ text: "", link: isEditing ? composer.getLink() : "" });
-    const isSaveDisabled = (isTextEnabled && isEmpty(fields.text)) || isEmpty(fields.link);
+    const isSaveDisabled = !hasLinkChanged && ((isTextEnabled && isEmpty(fields.text)) || isEmpty(fields.link));
 
     return (
         <BaseDialog
@@ -97,9 +98,10 @@ export function LinkModal({ composer, isTextEnabled, onClose, composerContext, i
                     label={_td("Link")}
                     value={fields.link}
                     placeholder=""
-                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                        setFields((fields) => ({ ...fields, link: e.target.value }))
-                    }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        setHasLinkChanged(true);
+                        setFields((fields) => ({ ...fields, link: e.target.value }));
+                    }}
                 />
 
                 <div className="mx_LinkModal_buttons">

diff --git a/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx
@@ -152,5 +152,12 @@ describe("LinkModal", () => {
 
         // Then
         expect(screen.getByLabelText("Link")).toContainHTML("my initial content");
+        expect(screen.getByText("Save")).toBeDisabled();
+
+        // When
+        await userEvent.type(screen.getByLabelText("Link"), "l");
+
+        // Then
+        await waitFor(() => expect(screen.getByText("Save")).toBeEnabled());
     });
 });