lost focus when using onChange with nextjs

gogo-ashacode commented 1 year ago

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.