RichText not updating properly based on state

[nwinger]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [1.20.0]

Expected / Desired Behavior / Question

I expect the text to update properly whenever the onChange handler is called. Also, why do you need it to return a string, instead of just accepting the updated state as a prop?

Observed Behavior

The webpart is only updating the first keystroke. All subsequent strokes seems to be disregarded, and will not be recorded unless I click outside the webpart and then refocus by clicking inside.

Steps to Reproduce

Please try the following code snippet:

import * as React from "react";
import { RichText } from "@pnp/spfx-controls-react/lib/RichText";

const RichTextExample: React.FC = (props) => {
  const [text, setText] = React.useState("Default text");

  const onChange = (newText: string) => {
    setText(newText); 
    return newText;
  };

  return <RichText value={text} onChange={onChange} />;
};

export default RichTextExample;

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[michelsmit]

Experiencing the exact same issue, makes it hard to use now.

[vaderj]

I am also experiencing this same issue

[nbelyh]

I have some sort of example how to make it work at least (considering there is also another bug with the focus). Yes, I realize this is bad code, but at least something :) Another thing that could fix that is re-creating the component that contains RichText every time by adding a "key" to it (if we are talking about something like a modal dialog for example). Would be happy to hear some feedback from the maintainers/creators of the control.

import * as React from "react";
import { RichText } from "@pnp/spfx-controls-react/lib/RichText";
import { IHelloWorldProps } from "./IHelloWorldProps";

const HelloWorld = (props) => {

  const [text, setText] = React.useState("Default text");
  let [text2] = React.useState("Default text");

  const onChange = (newText: string) => {
    text2 = newText; // no "setText2" to avoid focus bug
    return newText;
  };

  return (<React.Fragment>
    {text}
    <RichText value={text2} onChange={onChange} />
    <button onClick={() => setText(text2)} >Save</button>
   </React.Fragment>);
};

export default HelloWorld;

[nbelyh]

Duplicate: #650

[Abderahman88]

The property 'value' causes this weird issue. I changed it to defaultValue and it worked.

<ReactQuill ... defaultValue={text || ''} ... />

[nbelyh]

@Abderahman88 do you mean you changed this line?

sp-dev-fx-controls-react/src/controls/richText/RichText.tsx

Line 571 in dda0256

defaultValue={text || ''} //property value causes issues, defaultValue does not

The core issue seems to be still there, looks like this fix not actually helping much.. That is, it seems taht the controlled mode (value/onChange) is simply not working with RichText control (it probably never did though). The defaultValue addresses the "uncontrolled" mode of the ReactQuill.

[Abderahman88]

@nbelyh The controlled mode is not working. (Tested with your example)

This needs to be fixed 👍

[Abderahman88]

Like you said, it probably never worked in controlled mode.

[AJIXuMuK]

Hi all,

I've made the fix. Please, check beta version.

@nbelyh @Abderahman88 @vaderj @michelsmit @nwinger