Vuetify: [Bug Report] Vuetify v-btn component stays in active state after click

[milost1982]

Environment

Vuetify Version: 2.0.5
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

After button is clicked it stays in "active" state (eg. focus is retained) and thus background is not returned to normal color. This is especially visible on flat buttons. Just click any button and see what I mean: https://vuetifyjs.com/en/components/buttons#flat

Is this desired behavior (a feature) or a bug? This was not present in earlier versions of Vuetify 1.x (button background color was returned to default after click).

Expected Behavior

Button returned to default state after click.

Actual Behavior

Button stays in active state after click.

Reproduction Link

https://codepen.io/milost1982/pen/pMOGdR?&editable=true&editors=101

[MajesticPotatoe]

This is intended as it is how it works in MD2 spec which is the basis of vuetify 2.0 https://material.io/design/components/buttons.html

[ljmatkins]

I also am looking for a way around this, even if it is technically part of the MD2 spec.

To a user, it looks like they click the button and then it gets into some sort of stuck down state, almost like a half toggle. It makes it seem like something has broken. The first time I clicked one, I immediately checked the Javascript console for errors.

It'd be great if v-btn offered some way to disable this behavior. Failing that, does anyone have any workarounds?

[milost1982]

Exactly my thoughts.

[rowlo]

I really like Vuetify. But this issue here has really given me headaches. For weeks I thought we had a problem with async API calls or something until I just discovered that ticket here.

That button behavior is so disturbing. A stupid idea, especially when defined in a spec, needs some "off" switch, e.g. like :ripple="false" (Off topic: My favorite off-switch, I wish it was default).

We have a couple of v-rows with a v-btn inside. No primary color set. The clicked button looks like the app hung itself. It's ridiculous. On a primary color the effect is barely visible. But on a default button the dark gray shade just looks disturbing.

That issue shouldn't be closed but reopened to provide an off-switch.

[MajesticPotatoe]

@rowlo that feature has already been added as a prop called retain-focus-on-click which has a default value of false.

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

Thank you for your contribution and interest in improving Vuetify.