Focus is not working fine when removing window from ui with valo theme

Can anybody tell me why the email textfield is not holding focus in the following code

import java.util.logging.Logger;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.server.ClientConnector.DetachEvent;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@SuppressWarnings("serial")
@Theme("valo")
public class Test_vaadin_7_3_0UI extends UI {

    private static final Window WINDOW = new Window("Test Window");

    private static final Logger LOGGER = Logger
            .getLogger(Test_vaadin_7_3_0UI.class.getName());

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = Test_vaadin_7_3_0UI.class)
    public static class Servlet extends VaadinServlet {
    }

    private TextField email;

    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        TextField username = new TextField();
        username.focus();

        email = new TextField();

        Button showButton = new Button("Show window");
        showButton.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                LOGGER.info("DEBUG : showButton >> buttonClick");
                popup();
            }
        });

        Button hideButton = new Button("Remove Window");
        hideButton.setTabIndex(-1);
        hideButton.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                LOGGER.info("DEBUG : hideButton >> buttonClick");
                hide();
            }
        });

        layout.addComponent(username);
        layout.addComponent(email);
        layout.addComponent(showButton);
        layout.addComponent(hideButton);
    }

    private void popup() {
        LOGGER.info("DEBUG : popup");
        removeWindow(WINDOW);
        addWindow(WINDOW);
        LOGGER.info("DEBUG : addWindow(WINDOW) invoked");
    }

    private void hide() {
        LOGGER.info("DEBUG : hide");
        removeWindow(WINDOW);
        LOGGER.info("DEBUG : removeWindow(WINDOW) invoked");
        focusEmail();

    }

    private void focusEmail() {
        LOGGER.info("DEBUG : focusEmail");
        if (email != null) {
            email.focus();
            LOGGER.info("DEBUG : email.focus() invoked");
        }
    }

}

On click of
hideButtion
(after clicking on
showButton
), the
email
textfield is expected to get the focus, it’s getting the focus but the focus suddenly goes to the
showButton
. this issue is found only in

valo theme

, and it works fine with other themes. I tried removing the animations/transitions and all from the css then also it is not working fine. Can anybody tell me how to sovle this issue?


updated :

Works fine when disabling animation in

.valo .v-window[class*="animate-out"]
 {
    animation: 100ms ease 0s normal none 1 running valo-animate-out-scale-down-fade;
}

It’s solved by
Jouni Koivuviita’s
solution given
in this post
. Thanks a lot
Jouni Koivuviita
.