Link popup automatically close when we click on it

[Nikhilchandra-Rathod]

Link popup automatically close when we click on it or try to focus on input.
We using Mantine for components.
Demo video url: https://www.awesomescreenshot.com/video/35468868?key=8c81efba23afd4d8f52794d687ec82d7

"jodit-pro-react": "^4.1.27"

Browser: Chrome
OS: Windows
Is React App: True

Code

const preConfig = {
    theme: 'summer',
    readonly: false,
    toolbar: true,
    toolbarButtonSize: 'large',
    extraPlugins: ['pasteCode'],
    showXPathInStatusbar: false,
    buttons: [
      {
        group: 'uptomatic',
        buttons: toolbarButtons,
      },
    ],
    uploader: {
      imagesExtensions: ['jpg', 'png', 'jpeg', 'gif'],
      url: `/Ashx/Handler.ashx?OriginFullPath=${pathToUpload}`,
      isSuccess: function (response: { link: string }) {
        return response.link !== '';
      },
      process: function (response: { link: string }) {
        return {
          files: [response.link],
          isImages: [true],
          messages: ['Successfully uploaded'],
          path: '',
          baseurl: '',
          error: 0,
          msg: '',
        };
      },
      getMessage: function (response: unknown) {
        return 'Successfully uploaded';
      },
    },
    exportDocs: {
      ajax: {
        url: 'https://xdsoft.net/jodit/finder/',
      },
      css: 'body { font-family: "Inter", sans-serif !important; }',
      pdf: {
        allow: true,
        externalFonts: ['https://fonts.googleapis.com/css2?family=Inter&display=swap'],
        options: {
          format: 'A4',
          page_orientation: 'portrait',
        },
      },
    },
    controls: {
      bold: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
          <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
        </svg>
        `,
      },
      italic: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M11 5l6 0" /><path d="M7 19l6 0" />
          <path d="M14 5l-4 14" />
        </svg>
        `,
      },
      strikethrough: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M5 12l14 0" />
          <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />
        </svg>
        `,
      },
      ul: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M9 6l11 0" /><path d="M9 12l11 0" />
          <path d="M9 18l11 0" /><path d="M5 6l0 .01" />
          <path d="M5 12l0 .01" /><path d="M5 18l0 .01" />
        </svg>
        `,
      },
      ol: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M11 6h9" /><path d="M11 12h9" />
          <path d="M12 18h8" />
          <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" />
          <path d="M6 10v-6l-2 2" />
        </svg>
        `,
      },
      link: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M9 15l6 -6" />
          <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
          <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
        </svg>
        `,
      },
      pageBreak: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
          <path d="M19 18v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1" />
          <path d="M3 14h3m4.5 0h3m4.5 0h3" />
          <path d="M5 10v-5a2 2 0 0 1 2 -2h7l5 5v2" />
        </svg>
        `,
      },
      exportDocs: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
          <path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" />
        </svg>
        `,
      },
      source: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M7 8l-4 4l4 4" />
          <path d="M17 8l4 4l-4 4" />
          <path d="M14 4l-4 16" />
        </svg>
        `,
      },
      print: {
        icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" />
          <path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" />
          <path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
        </svg>
        `,
      },
      file: {
        icon: `
          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
            <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
          </svg>
        `,
      },
      video: {
        icon: `
          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z" />
            <path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
          </svg>
        `,
      },
    },
  } as IJoditEditorProps['config'];


<JoditEditor
        value={value}
        onBlur={onChange}
        config={preConfig}
      />

Expected behavior: Link popup should not close.

Actual behavior: Link popup close when we click or focus on it.

[xdan]

Is preConfig declared using useMemo?

[Nikhilchandra-Rathod]

Yes, preConfig declared using useMeno.

const preConfig = useMemo(() => {
    return {
      theme: 'summer',
      readonly: false,
      toolbarAdaptive: false,
      toolbar: true,
      toolbarButtonSize: 'large',
      extraPlugins: ['pasteCode'],
      showXPathInStatusbar: false,
      buttons: [
        {
          group: 'uptomatic',
          buttons: toolbarButtons,
        },
      ],
     uploader: {
      imagesExtensions: ['jpg', 'png', 'jpeg', 'gif'],
      url: `/Ashx/Handler.ashx?OriginFullPath=${pathToUpload}`,
      isSuccess: function (response: { link: string }) {
        return response.link !== '';
      },
      process: function (response: { link: string }) {
        return {
          files: [response.link],
          isImages: [true],
          messages: ['Successfully uploaded'],
          path: '',
          baseurl: '',
          error: 0,
          msg: '',
        };
      },
      getMessage: function (response: unknown) {
        return 'Successfully uploaded';
      },
    },
    exportDocs: {
      ajax: {
        url: 'https://xdsoft.net/jodit/finder/',
      },
      css: 'body { font-family: "Inter", sans-serif !important; }',
      pdf: {
        allow: true,
        externalFonts: ['https://fonts.googleapis.com/css2?family=Inter&display=swap'],
        options: {
          format: 'A4',
          page_orientation: 'portrait',
        },
      },
    },
      highlightSignature: {
        schema: {
          '\\|\\|([A-Z])\\w+\\|\\|': (jodit: Jodit) => {
            const span = jodit.createInside.element('span', {
              style: {
                color: '#0088CE',
              },
            });
            jodit.synchronizeValues();
            return span;
          },
        },
      },
      controls: {
        bold: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
          <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
        </svg>
        `,
        },
        italic: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M11 5l6 0" /><path d="M7 19l6 0" />
          <path d="M14 5l-4 14" />
        </svg>
        `,
        },
        strikethrough: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M5 12l14 0" />
          <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />
        </svg>
        `,
        },
        ul: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M9 6l11 0" /><path d="M9 12l11 0" />
          <path d="M9 18l11 0" /><path d="M5 6l0 .01" />
          <path d="M5 12l0 .01" /><path d="M5 18l0 .01" />
        </svg>
        `,
        },
        ol: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M11 6h9" /><path d="M11 12h9" />
          <path d="M12 18h8" />
          <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" />
          <path d="M6 10v-6l-2 2" />
        </svg>
        `,
        },
        link: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M9 15l6 -6" />
          <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
          <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
        </svg>
        `,
        },
        pageBreak: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
          <path d="M19 18v1a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-1" />
          <path d="M3 14h3m4.5 0h3m4.5 0h3" />
          <path d="M5 10v-5a2 2 0 0 1 2 -2h7l5 5v2" />
        </svg>
        `,
        },
        exportDocs: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
          <path d="M11.5 21h-4.5a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v5m-5 6h7m-3 -3l3 3l-3 3" />
        </svg>
        `,
        },
        source: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M7 8l-4 4l4 4" />
          <path d="M17 8l4 4l-4 4" />
          <path d="M14 4l-4 16" />
        </svg>
        `,
        },
        print: {
          icon: `
        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" />
          <path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" />
          <path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
        </svg>
        `,
        },
        file: {
          icon: `
          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
            <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
          </svg>
        `,
        },
        video: {
          icon: `
          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="jodit-icon-custom">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z" />
            <path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" />
          </svg>
        `,
        },
      },
    };
  }, [pathToUpload, toolbarButtons]) as IJoditEditorProps['config'];

But problem is still there.