Theme changed event raised when focus changes in Edit mode

[SharePickle]

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
• [x] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• Chrome 140.0.7339.81 (Official Build) (64-bit)
• 1.21.1
• 18.18.1

Describe the bug / error

When selecting web parts on the page in Edit mode (doesn't matter which one), theme changed event is called in my custom web part, triggering render. This happens every time when focus changes from one web part to another.

eval	@	VM2488:1
render	@	CustomWebPart.ts:93
i._internalHandleThemeChangedEvent	@	sp-pages-assembly_en…0cc25137d4d7.js:299
(anonymous)	@	sp-pages-assembly_en…00cc25137d4d7.js:23
e._raiseEventInternal	@	sp-pages-assembly_en…00cc25137d4d7.js:23
e.raiseEvent	@	sp-pages-assembly_en…00cc25137d4d7.js:23
e._raiseEvent	@	sp-pages-assembly_en…0cc25137d4d7.js:275
e._setTheme	@	sp-pages-assembly_en…0cc25137d4d7.js:275 // <------ this triggers theme changed event

Steps to reproduce

1. Open page in Edit mode
2. Select your custom Web Part (it should trigger re-render and theme changed event)
3. Select any other Web Part on the page, e.g., Quick Links
4. Your custom Web Part's render method is called

Expected behavior

No re-renders in web parts that are not focused.

[Ashlesha-MSFT]

Hello @SharePickle, Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@SharePickle, Thanks for reporting this. I’ve tried to reproduce the issue as described, but I haven't been able to consistently trigger the themeChangedEvent on focus change between web parts in Edit mode.

Would you mind sharing a minimal SPFx sample or a code snippet of your custom web part where you're seeing this behavior? Specifically, how you're subscribing to the theme changed event and triggering the re-render. This would really help in reproducing the issue accurately and narrowing down the cause.

[SharePickle]

@Ashlesha-MSFT Here's the snippet:

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

  public render(): void {
    console.log('!!! render !!!');
  }

  protected async onInit(): Promise<void> {
    console.log('!!! onInit start !!!');
    await new Promise(resolve => setTimeout(resolve, 3000));
    console.log('!!! onInit finish !!!');
  }

  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
    console.log('!!! onThemeChanged !!!');
  }
  
}

Steps to reproduce:

1. Open page in Edit mode
2. Click on HelloWorld Web Part
3. Click on Text Web Part
4. Click on Banner Web Part

Every time you click on other web parts or even other sections, the onThemeChanged is called which then triggers render. You will see this in console:

[Ashlesha-MSFT]

@SharePickle,

"Based on the reproduction attempt, it appears the issue might be caused by:

1. Multiple instances of the same web part on the page (each firing its own event)
2. Possible interference between web parts

Based on further testing, I wanted to clarify a few points that might help narrow down the issue:

• There is only one instance of my custom web part (FocusTriggerReproWebPart) on the page, that is only calling onThemeChanged
• The other web parts I interact with (like Text and Banner) do not seem to trigger onThemeChanged() method.

[SharePickle]

@Ashlesha-MSFT I only have 1 instance of my custom web part and 1 instance of Text Web Part in my test setup.

https://github.com/user-attachments/assets/7e494a90-02e1-417f-95ff-94f7ca98b10b

[Ashlesha-MSFT]

Hi @SharePickle, Environment:

• SPFx: 1.21.1
• Node.js: 22.x
• Browsers tested: Chrome 140.0.7339.81 (64-bit), Edge (same)
• Only one instance of my custom web part and one instance of the Text web part on the page

I'd recommend trying with SPFx 1.21.1 + Node 22, as this combination might avoid the issue you're seeing.