PropertyFieldCodeEditor not working with latest 1.16?

[spplante]

Category

• [ ] Enhancement
• [x] Bug
• [ ] Question

Version

3.12.0

Expected / Desired Behavior / Question

The editor should allow typing and selecting text normally

Observed Behavior

The editor is basically unusable:

• When putting the cursor in the middle of a word and starting typing, the typed characters replace eachother randomly
• When selecting a word, the selection "sticks" and changing the cursor position with the keyboard or mouse won't stop selecting text randomly

I tried to identify the exact moment the editor starts acting up but it seems quite random, sometimes you will be able to type words correctly, but generally when trying to type after changing the cursor position or trying selecting some text the editor starts acting up randomly.

I have a feeling this is related to the component not playing well with the latest versions of either the NodeJS or SPFx, because no matter what version of the component I try, none of them work and I know for a fact that the component does work as it is used in the Search WebParts just fine. In my case I recently upgraded my workstation with NodeJS v16.18.1 and scaffolded a brand new project using SPFx 1.16 and with this particular setup, I cannot get this component to work.

Steps to Reproduce

• Create a brand new React WebPart

yo @microsoft/SharePoint

• Install the library

npm install @pnp/[email protected] --save --save-exact

• In the root WebPart class, import the component and replace the description textfield with the editor:

import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';

[...]
groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                /*
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                */
                PropertyFieldCodeEditor('description', {
                  label: 'Edit HTML Code',
                  panelTitle: 'Edit HTML Code',
                  initialValue: this.properties.description,
                  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
                  deferredValidationTime: 500,
                  properties: this.properties,
                  disabled: false,
                  key: 'descriptionKey',
                  language: PropertyFieldCodeEditorLanguages.HTML
                })
              ]
            }
          ]
[...]

• Start typing in the editor, moving cursor, selecting words and notice the odd behaviors

[ghost]

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

[livain18]

Having the same issue here, even with an older version "@pnp/spfx-property-controls": "^3.8.0"...

[priests123]

I have upgraded to version 3.13.0 and this has resolved this issue for me

[spplante]

Just tested with a new project with 3.14.0 and still same issue the control is unusable