Rich text control does not allow to type in space character

[majkelmichel]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

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

Expected / Desired Behavior / Question

I can type in space into RichText control.

Observed Behavior

onChange callback does not fire when space key is pressed. Also pasting (CTRL+V) space character does nothing. Only way to add space is pasting text that has some text surrounding spaces.

Steps to Reproduce

SPFx version: 1.17.3
Simple SPFx Webpart. I have a button on property pane, that makes a Fluent UI Panel open. On this panel I have a RichText control. It is controlled with reducer-based state.

<Stack styles={{ root: { paddingTop: 32 } }}>
  <RichText value={item.value}
    className={"ql-active"}
    isEditMode={item.type === ECustomPropertyType.Static}
    onChange={(v) => {
        console.log("CHANGE", v); // shows that no event is fired for space
        actions.changeValue({ id: item.id, value: v }); // action that changes state through reducer
        return v;
    }} />
</Stack>

[ghost]

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

[github-actions]

Thank you for submitting your first issue to this project.

[NishkalankBezawada]

Hey @majkelmichel

Below is my sample, which works fine.

          <RichText 
            label="My rich text field" 
            value={this.state.richTextValue} 
            isEditMode={this.props.displayMode === DisplayMode.Edit} 
            onChange={this._getRichTextValue} />
          <PrimaryButton text='Reset text' onClick={() => { this.setState({ richTextValue: 'test' }); }} />

and onChange i am calling a method like this,

    private _getRichTextValue(v: string) {
      console.log('value:', v);
      this.setState({ richTextValue: v });
      return v;
    }

and below are the logs from console.

Will you be able to try this approach and let me know if this is working for you.

Thanks,
Nishkalank

[majkelmichel]

Hi @NishkalankBezawada
I think I have found the problem. Please look at sample component below:

import * as React from 'react';
import { useState } from 'react';
import { RichText } from "@pnp/spfx-controls-react/lib/controls/richText";
import { DetailsList, IColumn, SelectionMode } from "office-ui-fabric-react";

export default function RichTextBug(): JSX.Element {
    const [value, setValue] = useState("");

    const columns: IColumn[] = [
        {
            key: "richtext",
            name: "Rich Text",
            fieldName: "rich-text",
            minWidth: 200,
            onRender: () => (
                <RichText value={value} isEditMode={true} onChange={(v) => {
                    console.log("VALUE", v); // ! space is not registered because DetailsList stop propagation of keydown event
                    setValue(v);
                    return v;
                }}
                />
            )
        }
    ];

    return (
        <DetailsList items={[1]} columns={columns} selectionMode={SelectionMode.none} />
    );
}

keydown event is also used in DetailsList component for selecting rows. I believe this might somehow interfere with RichText component. I think that, when RichText is selected it should always receive that event, but it does not. For example TextField component works completly normal and is unaffected by being placed within DetailsList

[FedericoMAR]

Hello majkelmichel or anyone else reading.
As a fix, you could wrap the RichText into a div and use the property onKeyDown, like I did here:

  const handleKeyDown = (event: React.KeyboardEvent) : void => {
   if (event.key === ' ') {
       event.stopPropagation(); // Will prevent DetailsList from handling the event
   }
 };

<div className={props.className} onPaste={handlePaste} onKeyDown={handleKeyDown}> 
     <RichText
       value={props.value}
       onChange={props.onChange}
       isEditMode={props.isEditMode}
       styleOptions={richTextStyleOptions}
     />
   </div>