SPFx CommandBar buttons and Context Menu are not working with Microsoft List look and feel in SharePoint Online site

Question

We have SPFx commandBar buttons and context menu deployed in the SharePoint Online site developed using SPFx solution. We have deployed them in site under site app catalog and CDN is also implemented. Everything was working fine in the SharePoint Online modern view look and feel in the site.

Since Microsoft has started rolling out this new Microsoft List look and feel into the sites, our SPFx command bar buttons and context menu stopped working. These buttons and menu are totally disappearing from the list view, when this new look and feel appears in the page.

I checked the developer tool console in browser, but there is no error except warning message as below:

A preload for 'https:// is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

It works fine when there is this older modern look and feel:

SPFx commandBar buttons and context menu stops working once this Microsoft Lists look and feel surfaces:

We have used SPFx version: 1.16.1 in the solution. Please let me know if how can we make these buttons and context menu work with both look and feel.

I guess there are same issues posted in github:

• https://github.com/SharePoint/sp-dev-docs/issues/9514
• https://github.com/SharePoint/sp-dev-docs/issues/9711

Answer 1

This is the open issue in SPFx. There is one comment that has one workaround to resolve this issue.

Resolution: Go to list settings --> Advanced settings --> disable "Allow items from this list to be downloaded to offline clients?" and save the changes.

This will disable the new Microsoft Lists UI in the SharePoint Online site and commandbar & context menu will start working.

Until Microsoft resolves this, we can use the above workaround or we can move command bar & context menu customizations at SPFx custom form level.

Reference: https://github.com/SharePoint/sp-dev-docs/issues/9514#issuecomment-2278145332