Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
ciriousjoker opened this issue Jun 9, 2021 · 4 comments · May be fixed by #30308
Open

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

ciriousjoker opened this issue Jun 9, 2021 · 4 comments · May be fixed by #30308
Labels
area: material/expansion help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions

Comments

@ciriousjoker
Copy link

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
@ciriousjoker ciriousjoker added the needs triage This issue needs to be triaged by the team label Jun 9, 2021
@jelbourn
Copy link
Member

@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
Copy link
Collaborator

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...

@jelbourn jelbourn added area: material/expansion help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions and removed needs triage This issue needs to be triaged by the team labels Jun 14, 2021
@millbj92
Copy link 

<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
Copy link

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

mistrykaran91 added a commit to mistrykaran91/components that referenced this issue Jan 11, 2025
@mistrykaran91
fix(material/expansion) : Focus remains on the header when clicked on…
5fc8d21 
… next or cancel button inside the panel

When we click on next or cancel button the focus remained on the current panel header. This fix uses focus method from the class and changes the `FocusMonitor` to be in `EVENTUAL`

Fixes angular#22942
@mistrykaran91 mistrykaran91 linked a pull request Jan 11, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: material/expansion help wanted The team would appreciate a PR from the community to address this issue P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
5 participants
@jelbourn @zelliott @millbj92 @ciriousjoker @mistrykaran91