Make Button lose focus

Vaadin 6 / 7 / 8 Framework UI
1

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 ?

2

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

3

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.

4

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?

5

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.