panel: mdPanelRef.show() does not support re-opening a dialog w/ an animation

Bug, enhancement request, or proposal:

Bug

CodePen and steps to reproduce the issue:

https://codepen.io/saurabh-shelgaonkar/pen/LmqRZz?editors=0010

Detailed Reproduction Steps:

This is a codepen from AngularJs Material Website for Panel animation
Click on Dialog to Open the Dialog, then close the dialog with close button. Here I have used mdPanelRef.hide() to hide the panel.
Open the panel with Show button. It will not appear.
Comment the animation in config. Repeat the above steps, the panel appears.

What is the expected behavior?

The panel should show and hide with animations in config.

What is the current behavior?

The panel doesn't show and hide with animations in config.

What is the use-case or motivation for changing an existing behavior?

It is important to maintain the panel state many a times, so using show and hide.

Which versions of AngularJS, Material, OS, and browsers are affected?

AngularJS: 1.6.7
AngularJS Material: 1.1.9
OS:
Browsers: Chrome

Is there anything else we should know? Stack Traces, Screenshots, etc.

No

I got your scenario to work in this pen https://codepen.io/codymikol/pen/XqGrPB?editors=0011

Hey,
Thanks for the reply.

I went through the codepen.
If I am not mistaken, you have opened a new dialog/panel on Show button click.

In my scenario, I want to maintain the state of previously opened dialog, by hiding it, and showing it again via mdPanelRef.

Please verify.

Hey, you're absolutely right, I set the whole thing up so I could open the panel reference and then went ahead and made a new panel (Not enough coffee yesterday). I updated my pen so it actually calls the reference panel. I am having the same errors as you.

https://codepen.io/codymikol/pen/XqGrPB?editors=1111

It looks like the return animation on the panel gets mangled somehow. If you try to reproduce this selecting the slide animation type the panel does return, but way off to the left.

EDIT: It looks like the animation is going in to where the previous out animation was. You can see that I'm working on making the pen as simple as possible now to help narrow down what the issue is.

This might be related (or not), but I add this code:

        // Make sure it is an array
	if (angular.isString(self.config.groupName)) {
            self.config.groupName = [self.config.groupName];
        }

...to the MdPanelRef.prototype.open function in "material.component.panel" to catch input for config.groupName which is a string, and not an array. It appears that using the MdPanelRef.prototype.open function misses the similar validation used in MdPanelService.prototype.create which catches and forces config.groupName to be an array for later processing.

@NgMomentum

@NgMomentum I gave that a shot, but it did not help with fixing this issue unfortunately.

It seems like animateOpen and animateClose apply the transitionInClass and transitionOutClass properly when custom open and close animation classes are supplied as documented here.

material/src/components/panel/panel.js

Lines 3389 to 3392 in 0b83a2c

    
           animationOptions = { 
        
             transitionInClass: this._animationClass['open'], 
        
             transitionOutClass: this._animationClass['close'], 
        
           };

That may be a path to quickly verifying if this approach works or not?

@oliversalzburg

Yep, that looks like it works. This CodePen changes JS line 41 to

.withAnimation({open: '_md-panel-animate-enter', close: '_md-panel-animate-leave'});

Which causes opening to work repeatedly.

@oliversalzburg are you interested in sending a PR for this?

@oliversalzburg

@oliversalzburg are you interested in sending a PR for this?

Very much so! Thanks for the input. I will give this another close look.

@Splaktar

@Splaktar I submitted #11856, which should fix this issue.

fix(panel): invisble after hide/show cycle

Navigation Menu

Repository navigation

panel: mdPanelRef.show() does not support re-opening a dialog w/ an animation #11291

Bug, enhancement request, or proposal:

CodePen and steps to reproduce the issue:

https://codepen.io/saurabh-shelgaonkar/pen/LmqRZz?editors=0010

Detailed Reproduction Steps:

What is the expected behavior?

What is the current behavior?

What is the use-case or motivation for changing an existing behavior?

Which versions of AngularJS, Material, OS, and browsers are affected?

Is there anything else we should know? Stack Traces, Screenshots, etc.

18 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	animationOptions = {
	transitionInClass: this._animationClass['open'],
	transitionOutClass: this._animationClass['close'],
	};

panel: mdPanelRef.show() does not support re-opening a dialog w/ an animation #11291

Description

Bug, enhancement request, or proposal:

CodePen and steps to reproduce the issue:

https://codepen.io/saurabh-shelgaonkar/pen/LmqRZz?editors=0010

Detailed Reproduction Steps:

What is the expected behavior?

What is the current behavior?

What is the use-case or motivation for changing an existing behavior?

Which versions of AngularJS, Material, OS, and browsers are affected?

Is there anything else we should know? Stack Traces, Screenshots, etc.

Activity

codymikol commented on May 21, 2018

saurabh-shelgaonkar commented on May 21, 2018

codymikol commented on May 22, 2018

NgMomentum commented on Sep 2, 2018

Splaktar commented on Sep 17, 2018

18 remaining items

Splaktar commented on Feb 14, 2020

Splaktar commented on Feb 14, 2020

oliversalzburg commented on Feb 14, 2020

oliversalzburg commented on Feb 14, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions