DynamicForm RichText Field losing focus on typing

[SmarterJB]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

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

Expected / Desired Behavior / Question

Using the DynamicForm component with a RichText field should not lose focus when typing in the rich text field.

Observed Behavior

If you try to type in a RichText field in the DynamicForm you lose focus after each character.

Steps to Reproduce

Use the DynamicForm in any list with a RichText field.

Thanks!

[ghost]

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

[AJIXuMuK]

Thank you @SmarterJB for reporting this one.

I can repro it and will take a look.

[t0mgerman]

@AJIXuMuK - I'm fairly sure this is a similar issue to the one you fixed in #666 - if I modify https://github.com/pnp/sp-dev-fx-controls-react/blob/master/src/controls/richText/RichText.tsx#L630 and swap value for defaultValue - this issue goes away for me - so perhaps something similar is going on.

[wonderplayer]

Hello @AJIXuMuK,
Am observing this behaviour in 3.5.0 and 3.6.0 as well.
If I use just <RichText /> control, everything is fine.
I think this might be related to components being re-rendered on every value update with field's default value, which is always one and the same.

I've tried to reproduce the issue with RichText component by simulating DynamicForm behaviour and I succeeded 😊
You can check it here.

If you change from defaultValue={defaultValue} to defaultValue={this.state.richValue} then the problem is gone.
There are 4 re-renders happening when default value is not in sync with current value, as control will trigger onChange event when it notices difference. But after a couple of re-renders, new value in DynamicField is not new, so it stops re-rendering component with defaultValue.

[wonderplayer]

A solution would be to replace 'Note' case in getFieldComponent function with the following:

      case 'Note':
        if (isRichText) {
          const value = this.props.newValue ? this.props.newValue : defaultValue;
          return <div className={styles.richText}>
            <div className={styles.titleContainer}>
              <Icon className={styles.fieldIcon} iconName={"AlignLeft"} />
              {labelEl}
            </div>
            <RichText
              placeholder={placeholder}
              // Workaround for field losing focus
              value={value}
              className={styles.feildDisplay}
              onChange={(newText) => {
                this.onChange(newText);
                return newText;
              }}
              isEditMode={disabled}

            />
            {descriptionEl}
            {errorTextEl}
          </div>;
        }
        else {
          return <div>
            <div className={styles.titleContainer}>
              <Icon className={styles.fieldIcon} iconName={"AlignLeft"} />
              {labelEl}
            </div>
            <TextField
              defaultValue={defaultValue}
              placeholder={placeholder}
              className={styles.feildDisplay}
              multiline
              onChange={(e, newText) => { this.onChange(newText); }}
              disabled={disabled}
              onBlur={this.onBlur}
              errorMessage={errorText}
            />
            {descriptionEl}
          </div>;
        }

New value contains updated value, so rich text field will not set back to old value, which causes re-render to happen multiple times and lose focus.