lost focus when using onChange with nextjs

[Ash Aylsworth]

I am using next.js with this editor, and have attempted athe suggested solutions such as useMemo on options, but it doesn't seem to be fixing the issue for me.

We moved the editor setup into it's own component for easy reuse. Here is my setup:

next: 12.3.1
react: 18.2.0
react-simplemde-editor: ^5.2.0

Markdown editor component

import dynamic from "next/dynamic";
import React, { useMemo } from "react";
import "easymde/dist/easymde.min.css";

interface MarkdownEditorProps {
  id: string;
  value: string;
  onChange: (value: string) => void;
}

export const MarkdownEditor = ({
  id,
  value,
  onChange,
}: MarkdownEditorProps) => {
  const SimpleMDE = dynamic(() => import("react-simplemde-editor"), {
    ssr: false,
  });

  const simpleMDEOptions = useMemo(() => {
    return {
      spellChecker: false,
      sideBySideFullscreen: false,
    };
  }, []);

  return (
    <SimpleMDE
      id={id}
      value={value}
      onChange={onChange}
      options={simpleMDEOptions}
    />
  );
};

Usage inside another page component:

import { MarkdownEditor } from "components/markdown/MarkdownEditor/MarkdownEditor";

export const SomePage: FunctionComponent<PageProps> = ({
}) => {
...
  const [editorContent, setEditorContent] = useState<string>();

  <label htmlFor="description">
    Short Description
  </label>
  <MarkdownEditor
    id="description"
    value={editorContent}
    onChange={setEditorContent}
  />
...
}

Same as in the other issues, after the onChange is triggered while typing focus is lost and you need to click into the editor to type the next letter.

Any help would be appreciated.

[Andrey (Andrii) Los]

I'm unsure I can help without some sort of reproduction really.

[Ash Aylsworth]

Here is a simple version of our app (with same package versions) that reproduces the issue:
https://github.com/gogo-ashacode/next-simplemde-issue.

Does that work?

[Andrey (Andrii) Los]

@gogo-ashacode thanks. I'll look at it later.

[Andrey (Andrii) Los]

One of the issues I can see looking at the code a bit closer (yesterday I missed that) that you have import of SimpleMDE inside the render function. WTF lol :D

Move

  const SimpleMDE = dynamic(() => import("react-simplemde-editor"), {
    ssr: false,
  });

Outside of the render and I bet it will start to work nicely.

[Andrey (Andrii) Los]

Checked locally. Moving SimpleMDE out of render obviously fixed it.

[Ash Aylsworth]

OMG, i didn't notice it had been moved inside either! I guess because it's the first time I've seen an import like that and I was obsessed with controlled/uncontrolled input issues that my brain just tuned it out. Sorry to waste your time, but the fresh set of eyes helped, so thanks. 😅

[Andrey (Andrii) Los]

OMG, i didn't notice it had been moved inside either! I guess because it's the first time I've seen an import like that and I was obsessed with controlled/uncontrolled input issues that my brain just tuned it out. Sorry to waste your time, but the fresh set of eyes helped, so thanks. 😅

No problem :)