Ripple effect doesn't clear from button after finishing the ripple

[ydyote]

Hello, I really like this library

The ripple effect doesn't disappear from my buttons for some reason.

this is how it looks without any clicks:

and this is after I click on the "DENSE" button:

based on this page: https://material-ui.com/components/buttons/#outlined-buttons the ripple effect should fade completely and the button should revert back into the original state.

It is weird to me that nobody has this problem, I checked the issues but maybe I just didn't find it, sorry if this is a duplicate.

I tested this on newly created PWA blazor app in vs 2019, added the nuget package to the "client" project and added these into index.html head tag:

<script src="_content/MatBlazor/dist/matBlazor.js"></script>
<link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

also added this to index.razor:

<MatButton Raised="true">Raised</MatButton>
<MatButton Unelevated="true">Unelevated</MatButton>
<MatButton Outlined="true">Outlined</MatButton>
<MatButton Dense="true">Dense</MatButton> 

and this into _Imports.razor:

@using MatBlazor

[EduVencovsky]

I realised the same. With me, it happens when I open the MatDialog. Before opening, everything is normal, the ripple happens ok, but after I open a MatDialog, the ripple effect just freezes.

[RedFolder]

I have this problem with icon buttons

[EduVencovsky]

@RonPeters Are you sure that the IconButton isn't focused? I tested here and for me looks like the ripple effect is frozen, but actually is just focused, if you click out, it will unfocus.

[RedFolder]

@EduVencovsky Well that explains it. I think it's confusing, but I guess that's what Google wanted under their design guidelines.

[EduVencovsky]

@RonPeters Yes, if you take a look at the demo, it have the same effect as matblazor .

[ydyote]

Wait a second, what is the actual baseline here?

https://material-ui.com/components/buttons/#icon-buttons

no weird focus sticking there.

[ydyote]

And btw the focus is sticking on every button not only the icon button so thats the actual reason for the "bug" - if the demo @EduVencovsky provided is the one which is the baseline for the whole MatBlazor then there is no bug, if there is some other baseline then it is probably a bug. (IMO there is no reason for that default focus sticking anyways, it should be maybe optional via some property)

[RedFolder]

@ydyote The focus demo is different on the official Material components (https://material.io/components/buttons/) vs the React components. The focus stays and is too similar to the normal state, in my opinion. But that is the baseline and is consistent with MatBlazor.

[EduVencovsky]

The problem of @ydyote isn't a problem, it's correct. But I'm having a different problem

The ripple looks like it's frozen and don't show anymore.

Looks like the button just stay focused and don't reset the ripple effect.

[RedFolder]

@EduVencovsky I retract my original comment. I see what you're saying in your animation. I'll see if I can replicate the behavior.

[RedFolder]

@EduVencovsky can you provide the HTML and browser that you are using? Can you also confirm that you see the behavior on the MatBlazor demo page: https://www.matblazor.com/Button

[EduVencovsky]

@RonPeters While testing, looks like the error only happens when it's inside an invalid EditForm ?

I can't see it in the docs because there is no button inside a form.

I'm using latest chrome and just using MatButton. I also removed every css in my project and only left the matblazor css and js, but still the same behavior.

[RedFolder]

@EduVencovsky Great. Now we have a reproducible test case for debugging. The ideal next step would be to build an equivalent test using raw Material for Web components. If it behaves the same, then it's an issue with Material and not necessarily MatBlazor.

[lindespang]

@RonPeters @EduVencovsky Maybe you can post a new issue about your findings with that great gif as introduction? Seems like we have two separate issues here.

@ydyote Default material web components keeps focus of ripple after click on iconbuttons etc. I agree that it looks iffy - both react and angular material thinks the same and clears the ripple after click. It looks especially weird on checkboxes imo.

https://material-components.github.io/material-components-web-catalog/#/component/checkbox

If i recall correctly, this behaviour is intended for material design due to accesability, but can't remember their motivation...

It's quite easy to clear the ripple in JS when instantiating the MDCRipple in MatBlazor, just add listener on mouseup-event and deactivate the ripple. I've been thinking about submitting a PR but not sure yet where to put the condition for "RippleMode" - each button or maybe globally in your application? I guess both makes sense.

[RedFolder]

@lindespang I agree that this issue should be closed as not a bug. @EduVencovsky, please create a new issue with your example so we can track it properly.

Lastly, @lindespang I like your idea of having a global mechanism for this, but it would probably be more correctly named "FocusMode", because the focus and the ripple are totally separate.

[frankhale]

So yeah I stumbled on this tonight and instantly thought it was a bug. To me having the focus not clear the ripple feels really bad. I checked Angular Material site and the behavior is different there. The ripple definitely clears after clicking.

Angular Material: https://material.angular.io/components/button/overview

[frankhale]

@lindespang Thank you for the tip on how to deactivate the ripple. This unfortunately did not work for me. I called the deactivate function inside a mousup event on the button but it had no effect. What worked for me (and this is probably very naïve code):

button.listen("mouseup", (e) => {
    button.getDefaultFoundation().handleBlur();
});

After clicking the focus is removed from the button causing the ripple to go away (as one would expect).