Rich Text focus disapppear

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

1.13.0-beta.892b624

Expected / Desired Behavior / Question

focus not disappear

Observed Behavior

focus disappear after enter one symbol

Steps to Reproduce

basic setState usage

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

export default class HelloWorld extends React.Component<IHelloWorldProps, { value: string }> {
    constructor(props: IHelloWorldProps) {
        super(props);
        this.state = {
            value: ''
        };
    }
    private onChange = (value: string) => {
        this.setState({ value });
        return value;
    }
    public render(): React.ReactElement<IHelloWorldProps> {
        return (
            <div><RichText value={this.state.value} onChange={(text) => this.onChange(text)} /></div>
        );
    }
}

[estruyf]

As you are storing the value back to the state of your web part, it will re-render the HTML. That is why you lose focus. You can also store the value as a private variable in your component. That will not trigger a re-render.

[Katli95]

Thanks for the answers guys,

@kirillstarlight Your method worked for me. I duplicated the value in the constructor and used that as the value for the control and updated the state of the parent with onChange. This however feels fairly dirty and I’d much rather prefer some form of .focus() accessor for the control or have it support statefull components 😕

(I tried getting the quill editor via reference and focusing that but it didn’t work) i.e.

// RichTextReference being a reference to this control
RichTextReference.getEditor().focus()
//Resulted in persisting the focus border around the control but didn't facilitate input