PropertyFieldTextWithCallout resetting cursor everytime a character is typed?

[spplante]

Category

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

Version

3.11.0

Expected / Desired Behavior / Question

When typing in the textbox, the cursor should stay next to the character you just typed

Observed Behavior

Each time you type a character, the cursor resets to the end of the text. When starting from blank and typing a new value you don't notice this because the cursor stays at the end, but if you start typing in the middle of an existing value it keeps resetting the cursor at the end which is extremely confusing for users.

Example: Textbox contains "Test.json" and you want to change it to "TestUpdated.json", you put your cursor right after "Test" and you start typing "Updated", but the value will end up with "TestU.jsondated" because as soon you type "U" the cursor resets to the end of the string... In order to be able to update the value you have to delete it entirely and start typing it from scratch otherwise it's unusable.

The OOTB PropertyPaneTextField does not have this problem

Steps to Reproduce

• Start a brand new SPFx project using Yoman
• Replace the default "description" property with the following :

PropertyFieldTextWithCallout('description', {
                  calloutTrigger: CalloutTriggers.Hover,
                  key: 'descriptionFieldId',
                  label: 'Describe your PnP passion with few words',
                  calloutContent: React.createElement('span', {}, 'You can describe your passion with such words as strong, cosmic, all-absorbing, etc.'),
                  calloutWidth: 150,
                  value: this.properties.description
                })