Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Make Button lose focus
hi guys
i have a problem with a button
it's transparent with background image (using css)
when it's clicked, it gets focus and become no more transparent !
and only after clicking anywhere it returns normal with it's background image
any solution ?
I had the same problem. With Vaadin 6.8.1 I solved it by subclassing Button and adding a click listener that moved focus to nearest ancestor that can acquire focus:
package com.macquail.vaadin.ui.components.button;
import com.vaadin.ui.Button;
import com.vaadin.ui.Component;
public class FocusLosingButton extends Button implements Button.ClickListener{
public FocusLosingButton() {
super();
addListener((Button.ClickListener)this);
}
@Override
public void buttonClick(ClickEvent event) {
Component parent = this.getParent();
while (parent != null) {
if(parent instanceof Component.Focusable) {
((Component.Focusable) parent).focus();
break;
} else {
parent = parent.getParent();
}
}
}
}
Actually I am going to package it as an extension and post it to Vaadin directory.
Edit: So, here it is available: http://vaadin.com/directory#addon/focus-losing-button---addon
The original symptom should be fixed just by using CSS, no need to remove focus from the button. Just make sure you use the right selector (:focus) and that the selector has enough specificity to override any previous selectors.
I've noticed the same effect when using Vaadin in a portal. When I click a button it seems to stay 'pressed', but when you click elsewhere it return to normal. So it seems to be related to the focus on the component. The trick with the custom button doesn't work in my case, but I also can't seem to find the correct piece of CSS to change so this strange focus effect is canceled. Any ideas?
I think I found the correct piece of CSS to make the button styling work correctly when pressed.
.v-button:active .v-button-wrap, .v-button.v-pressed .v-button-wrap, .v-button:focus .v-button-wrap {
background: #d4d4d4 url(/html/themes/classic/images/portlet/header_bg.png) repeat-x 0 0 !important;
}
I used this together with the CSSInject plugin so I didn't have to change the Liferay theme to fix this.