jodit / jodit/jodit-react

On OnChange the editor loses focus

Open
#43 56 comments 19 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
406
Forks
131
Avg merge
2h 32m
Merged PRs (30d)
2

Description

Hi,
I need to use setContent on the event OnChange instead of on OnBlur but if I do this the editor loses the focus every time the function is called and some errors appear on the console.
Does anyone know how to solve this? Or is it mandatory to use onBlur? Thanks!

import React, { useState, useRef } from "react";
import JoditEditor from "jodit-react";

const Editor = ({ value, onChange }: IEditorProps): JSX.Element => {

  const editor = useRef(null);
  const [content, setContent] = useState(value);

  const config = {
    readonly: false,
  };

  const handleChange = (newContent: string) => {
    setContent(newContent);
  };

  return (
        <JoditEditor ref={editor} value={content} config={config} onChange={handleChange} />
  );
};

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

export default Editor;
Captura de pantalla 2020-01-20 a las 13 12 59

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the provided JoditEditor component, using the ref, controlled value, and onChange handler shown in the report. Inspect the JoditEditor focus and value-update behavior; done means setContent can run from OnChange without losing editor focus or producing console errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.