Merge pull request #120 from payloadcms/fix/richtext-relationship-modal

fix: modal issues with richtext relationship

Author: jmikrut

src/admin/components/elements/Button/index.tsx

@@ -78,7 +78,7 @@ const Button: React.FC<Props> = (props) => {
     className: classes,
     onClick: handleClick,
     rel: newTab ? 'noopener noreferrer' : undefined,
-    target: newTab ? '_blank' : undefined
+    target: newTab ? '_blank' : undefined,
   };
 
   switch (el) {

src/admin/components/elements/Button/types.ts

@@ -1,19 +1,19 @@
 import { MouseEvent } from 'react';
 
 export type Props = {
-    className?: string,
-    type?: 'submit' | 'button',
-    el?: 'link' | 'anchor' | undefined,
-    to?: string,
-    url?: string,
-    children?: React.ReactNode,
-    onClick?: (event: MouseEvent) => void,
-    disabled?: boolean,
-    icon?: React.ReactNode | ['chevron' | 'x' | 'plus'],
-    iconStyle?: 'with-border' | 'without-border' | 'none',
-    buttonStyle?: 'primary' | 'secondary' | 'transparent' | 'error' | 'none' | 'icon-label',
-    round?: boolean,
-    size?: 'small' | 'medium',
-    iconPosition?: 'left' | 'right',
-    newTab?: boolean
+  className?: string,
+  type?: 'submit' | 'button',
+  el?: 'link' | 'anchor' | undefined,
+  to?: string,
+  url?: string,
+  children?: React.ReactNode,
+  onClick?: (event: MouseEvent) => void,
+  disabled?: boolean,
+  icon?: React.ReactNode | ['chevron' | 'x' | 'plus'],
+  iconStyle?: 'with-border' | 'without-border' | 'none',
+  buttonStyle?: 'primary' | 'secondary' | 'transparent' | 'error' | 'none' | 'icon-label',
+  round?: boolean,
+  size?: 'small' | 'medium',
+  iconPosition?: 'left' | 'right',
+  newTab?: boolean
 }

src/admin/components/forms/field-types/RichText/elements/relationship/Button/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { Modal, useModal } from '@faceless-ui/modal';
 import { Transforms } from 'slate';
 import { ReactEditor, useSlate } from 'slate-react';
@@ -49,12 +49,14 @@ const insertRelationship = (editor, { value, relationTo, depth }) => {
   ReactEditor.focus(editor);
 };
 
-const RelationshipButton = ({ path }) => {
+const RelationshipButton: React.FC<{path: string}> = ({ path }) => {
   const { open, closeAll } = useModal();
   const editor = useSlate();
   const { serverURL, routes: { api }, collections } = useConfig();
+  const [renderModal, setRenderModal] = useState(false);
   const [loading, setLoading] = useState(false);
   const [hasEnabledCollections] = useState(() => collections.find(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship));
+  const modalSlug = `${path}-add-relationship`;
 
   const handleAddRelationship = useCallback(async (_, { relationTo, value, depth }) => {
     setLoading(true);
@@ -64,9 +66,15 @@ const RelationshipButton = ({ path }) => {
 
     insertRelationship(editor, { value: json, depth, relationTo });
     closeAll();
+    setRenderModal(false);
+    setLoading(false);
   }, [editor, closeAll, api, serverURL]);
 
-  const modalSlug = `${path}-add-relationship`;
+  useEffect(() => {
+    if (renderModal) {
+      open(modalSlug);
+    }
+  }, [renderModal, open, modalSlug]);
 
   if (!hasEnabledCollections) return null;
 
@@ -75,36 +83,41 @@ const RelationshipButton = ({ path }) => {
       <ElementButton
         className={baseClass}
         format="relationship"
-        onClick={() => open(modalSlug)}
+        onClick={() => setRenderModal(true)}
       >
         <RelationshipIcon />
       </ElementButton>
-      <Modal
-        slug={modalSlug}
-        className={`${baseClass}__modal`}
-      >
-        <MinimalTemplate>
-          <header className={`${baseClass}__header`}>
-            <h3>Add Relationship</h3>
-            <Button
-              buttonStyle="none"
-              onClick={closeAll}
+      {renderModal && (
+        <Modal
+          slug={modalSlug}
+          className={`${baseClass}__modal`}
+        >
+          <MinimalTemplate>
+            <header className={`${baseClass}__header`}>
+              <h3>Add Relationship</h3>
+              <Button
+                buttonStyle="none"
+                onClick={() => {
+                  closeAll();
+                  setRenderModal(false);
+                }}
+              >
+                <X />
+              </Button>
+            </header>
+            <Form
+              onSubmit={handleAddRelationship}
+              initialData={initialFormData}
+              disabled={loading}
             >
-              <X />
-            </Button>
-          </header>
-          <Form
-            onSubmit={handleAddRelationship}
-            initialData={initialFormData}
-            disabled={loading}
-          >
-            <Fields />
-            <Submit>
-              Add relationship
-            </Submit>
-          </Form>
-        </MinimalTemplate>
-      </Modal>
+              <Fields />
+              <Submit>
+                Add relationship
+              </Submit>
+            </Form>
+          </MinimalTemplate>
+        </Modal>
+      )}
     </Fragment>
   );
 };