bug(expansion): Expansion panel header changes color when clicking a button inside

[ciriousjoker]

Reproduction

Steps to reproduce:

1. Go to the Stackblitz or to the bottom example
2. Click the "close" or "previous" button to close the panel

Expected Behavior

Panel should close, nothing more.

Actual Behavior

Panel header is "focused", which looks odd considering you just tried to close it (and potentially even changed to another open panel).

If this is intended, is there any way to programmatically remove focus to fix it?

Environment

• Angular: 12.0.3 (as seen in the Stackblitz)
• CDK/Material: 12.0.4 (as seen in the Stackblitz)
• Browser(s): Chrome 91.0.4472.77 (Official Build) (64-Bit) (cohort: Stable)
• Operating System: Windows

[jelbourn]

@zelliott curious to get your opinion on this.

The expansion panel hard-codes the focus origin to program for this case (focus was inside the collapsing content). Would it make more sense to rely on the FocusMonitor to pick up that the focus really originated from a pointer interaction?

[zelliott]

Yeah, IIRC that's why @jesscxu went through a while back and tried to remove all of the focusVia calls that were defaulting to program. I think if you change this focusVia to just an HTMLElement.focus call, then FocusMonitor will decide what the origin should be... of course depending upon what mode it's in.

If FocusMonitor is in IMMEDIATE mode, it'll still attribute the focus change as program, whereas if it's in EVENTUAL mode, it'll attribute it as whatever the last interaction was (mouse in this case, if the "Close" button is clicked).

So I think if we make the change above (from focusVia -> focus), then @ciriousjoker will still need to change FocusMonitor to be in EVENTUAL mode in their app in order for the header to not change color.

Taking a step back, it's probably worth revisiting when we apply focus styles to components, but that's a larger discussion...

[millbj92]

<mat-expansion-panel-header style="background-color: #fff">

Not that this isn't a bug, and I'm also new here, but if you want the header to stay white or any other color, you can use inline styling here, or ngClass/ngStyle for a more dynamic approach. Seems to work for me on the StackBlitz, should be viable as a work-around.

[mistrykaran91]

Hi! Is anybody working on it? Otherwise, I could try to fix it if you don't mind.