Cursor disappears after typing a letter

[ANJALI2980]

React : v17.0.2 Simplemde : v5.0.2

Description: I am very new to Simplemde.I used Simplemde in my react project.when I am trying to type into text area of Simplemde the cursor disappears after typing a single letter,to type next letter I had to click on textarea to bring back cursor. I tried but couldn't find solution.

Code: imports: import React, { Component } from 'react'; import SimpleMDE from "react-simplemde-editor"; import "easymde/dist/easymde.min.css";

onBodyChange = (value) => { this.setState({ body: value, }); };

<SimpleMDE onChange={this.onBodyChange} options={{ hideIcons: ["preview","side-by-side","fullscreen"] }}
/>

[RIP21]

@ANJALI2980 hey. I see that your code example is not full. So I cannot help much. I need more.

[ANJALI2980]

@RIP21 my issue is mentioned in issue #164 .you suggested to memoize options but I am not sure how to do that,please help!

[RIP21]

Take a look at the README.md.

Memoize = use useMemo hook. E.g. const options = useMemo(() => { return { ideIcons: ["preview","side-by-side","fullscreen"] }}, []) And then options={options} below in JSX.

In case you're using class component, you need to have property like

editorOptions = {
	hideIcons: ["preview","side-by-side","fullscreen"]
}

inside your class body. Then you'll use it in the component the same way you use onChange handler. E.g. options={this.editorOptions}

[jcwrightson]

I had the same problem. Fixed by setting autofocus: true in the editor options.

[felixroos]

a simpler solution: it will also work if you define the options statically outside of the component, as the object will stay the same:

const mdeOptions = {/*...*/}

function MyComponent() {
  /* ... */
  return (<SimpleMDE options={mdeOptions} value={value} onChange={onChange} />)
}