WebPartTitle Control Fails to Update After Initial Save

[ferrarirosso]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

v3.19.0

Affects also previous versions.

Expected Behavior

The WebPart title should be editable every time the WebPart is in edit mode, not just during the initial setup.

Observed Behavior

• The WebPart title can only be set once, during the initial addition of the WebPart.
• The event appears to propagate correctly, but the WebPart does not re-render, leading to the observed faulty behavior.
• Note: Users have reported that this faulty behavior started appearing a couple of days ago.
• Forcing a re-render by adding this.render() resolves the issue, but this would require updating all existing components. Additionally, this requirement is not documented as mandatory.

updateProperty: (value: string) => { this.properties.title = value; this.render(); }}

Steps to Reproduce:

1. Scaffold a new SPFx React solution using SPFx v1.19.0.
2. Ensure you are using Node.js v18.19.1.
3. Implement the WebPartTitle Control as per the PnP WebPartTitle documentation.
4. Add the WebPart to a SharePoint page.
5. Publish the page.
6. Edit the page and attempt to update the WebPart title.

[ferrarirosso]

I have investigated the problem further

The issue arises from this commit #1672

The problem lies in the fact that changing the textarea element to use value instead of defaultValue makes it a controlled component in React.

Please refer to the React documentation on React Js Uncontrolled Components - Default values

Since this change breaks production code and would require modifications to all solutions using the WebPartTitle component, I would suggest reverting this change. I am not sure of the original intent behind changing this in relation to Issue #1672.

Please advise if I should proceed with this change