Sp-dev-fx-controls-react: 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;

[msftbot[bot]]

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.

[nbelyh]

@Abderahman88 do you mean you changed this line?

https://github.com/pnp/sp-dev-fx-controls-react/blob/dda0256dab865a47c56a971763bf44f18689a5dc/src/controls/richText/RichText.tsx#L571

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