placeholder value is not changing correctly if we change it from parent dynamically using state after version 1.14.1

[kkunalguptaaa-jtg]

I was using the editor as text-area and changing its placeholder value according to the value selected in a dropdown present in the same form but it wasn't updating the placeholder value correctly, its value remained just the previous state of the current state, and got update to current if we made text editor onFocus or click on it.

This is working fine until version 1.14.1

I am attaching a codeSandBox link of a similar kind working https://codesandbox.io/s/quiet-cdn-3llkvw?file=/src/App.js

to see the problem in codeSandBox pls click on the button and see the placeholder value is not changing and lagging behind and when u click on text area it automatically get updated to correct state.

[Wilsonruan]

I got the same issue. At the moment, you could focus() on the editor to get it updated. If someone has a better fix. That would be great.

  const handleClick = () => {
    setCounter(counter + 1);
    let editorContents = document.getElementsByClassName(`notranslate public-DraftEditor-content`);
    for (let i = 0; i < editorContents.length; i++) {
      editorContents[i].focus({preventScroll: true});
    }
  };

[kkunalguptaaa-jtg]

yes @Wilsonruan I also find that best way to solve this problem is by using focus(), but we can do this by using ref provided in editorRef in text editor instead of using document.getElementsByClassName(notranslate public-DraftEditor-content); e.g.

 const [textEditorRef, setTextEditorRef] = useState();

   const handleClick = () => {
    setCounter(counter + 1);
    textEditorRef?.focus();
  };

    <Editor
     ...
      onEditorStateChange={(editorStateChange) => {
        onChange(editorStateChange);
      }}
      placeholder={placeholder}
      editorRef={(ref)=>{
        if (!textEditorRef) {
          setTextEditorRef(ref);
        }
      }}
    />

but all these are hacks not proper solution.