Buttons (onClick events) in BaseDialog no longer working - ListView Command Set

[areestlc]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

SPFx version: 1.14.0
Node.js version: 14.19.0

Describe the bug / error

Since approximately 2022-09-28 9:30 PM UTC, buttons or 'onClick' events in Dialog boxes created from ListView Command Set buttons are no longer being triggered.

We are using SFPx version 1.14.0 & React version 16.13.1. For the dialog, we are using sp-dialog@1.14.0. We haven't deployed any updates, but are seeing onClick not working across all our SharePoint environments.

Steps to reproduce

1. Deploy a ListView Command Set with an sp-dialog Dialog (custom component with buttons) created on Command button click.
2. Click a button in the created Dialog box.
3. The buttons actions will not execute.

Expected behavior

It is expected that button actions will execute correctly, regardless of whether they are in a Dialog box. This appears to be some kind of disabling of React's onClick propagation, however not sure what exactly is causing the underlying issue.

[ghost]

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

[areestlc]

To add some extra detail to his issue, it seems like upgrading react & react-dom from v16.13.1 to v17.0.2 corrects the issue, however it causes other problems which seem to be related to conflicting React versions.

Below I have noticed that in a sharepoint list, react-dom-16 & react-dom-17 are both being fetched and most likely loaded from the CDN, which I am suspecting is a major source of the issue.

[justdevelopment]

We have the same issue, in a project with SPFx 1.13.1 / React 16.9. There were no changes made to the project, it's been working fine for ages and suddenly stopped working last night.

[areestlc]

This ended up being a pretty big rabbit hole we were taken down. We are using the SPFx command set extensively for customer solutions, and unfortunately this caused a critical outage that we needed to fix ASAP.

For the benefit of anyone else encountering this issue, we found the below work around:

1. Upgrade react & react-dom to v17.0.2 => npm install react@17.0.2 && npm install react-dom@17.0.2
2. Update your gulp file to not use the external SharePoint react libraries. We used the below code in gulpfile.js to achieve this:

'use strict';

const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

// ********* ADDED *******
// disable tslint
build.tslintCmd.enabled = false;
// ********* ADDED *******

build.configureWebpack.mergeConfig({
  additionalConfiguration: (wpcfg) => {
    // remove externalization of react & react-dom
    wpcfg.externals = wpcfg.externals.filter((external) => {
      return external !== "react" && external !== "react-dom";
    });

    return wpcfg;
  },
});

build.initialize(require('gulp'));

For the changes above, we found and referenced this github ticket for updating React versions: #1315

Still unsure what exactly has caused the issue, but my guess would be that SharePoint is including react-dom-17-bundle from the CDN by mistake, and the differences/conflicts in React event delegation from React v16-v17 is preventing onClick events from bubbling up correctly.

You can read more about the react event delegation changes in the official React v17 docs to those interested:
https://reactjs.org/blog/2020/08/10/react-v17-rc.html#changes-to-event-delegation

[AJIXuMuK]

We have rolled back breaking changes and will be rolling out an appropriate fix soon.

[AJIXuMuK]

@areestlc @justdevelopment - we have rolled out the actual fix.
Could you please verify that the issue is no longer present on your tenants?

Thanks!

[areestlc]

@AJIXuMuK confirming that the issue is fixed in our tenants, thanks for looking into and resolving this quickly.

[oharveyCloudwell]

@AJIXuMuK , Is the original breaking fix a rolling patch of some kind? We have an affected client tenant that just had this break today with the same issues.

[AJIXuMuK]

@oharveyCloudwell - the patch for dialog it rolled out.
You may experience other issues (like react version mismatch) but not the events issues.

If you experience React versions mismatch - check this thread: #8482 (comment)

[calechko]

We are still experiencing this issue, but only one one tenant. When we download the exact app package and run it on another tenant it works fine. So it is not an issue with the code, and we are seeing react-17 come in from the CDN, so it appears the issue is still happening, at least for certain tenants. Is there a fix we can put in place for our client?

[areestlc]

We saw spotty behaviour like this as well after the fix was deployed, and it was caused by the browser cache. Ensure you try a hard refresh for the affected tenants/users to rule out a stale cache. Best way to do that is to use Ctrl+Shift+R or open up developer tools and then right click on the browser refresh button for additional options, at least for Chromium based browsers:

[AJIXuMuK]

try hard refresh or adding ?sw=bypass to your url.
You might have older version of scripts cached.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues