TextArea size get reset when css resize is set (#14080)

Listen to MouseUp event on the <textarea> and notify the state with the width and height if changed.
Add com.vaadin.client.Util.Size to manipulates the css width/height.

Change-Id: I96a308658d2877f1f6c05feaa7840a268bb06709

2 files changed, 238 insertions, 0 deletions

diff --git a/uitest/src/com/vaadin/tests/components/textarea/TextAreaSizeResetted.java b/uitest/src/com/vaadin/tests/components/textarea/TextAreaSizeResetted.java
new file mode 100644
index 0000000000..b2607050a4
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/textarea/TextAreaSizeResetted.java
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.textarea;
+
+import com.vaadin.event.UIEvents;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.Component;
+import com.vaadin.ui.CssLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.TextArea;
+import com.vaadin.ui.TextField;
+
+/**
+ * Ticket #14080
+ *
+ * - The bug happen on push event.<br/>
+ * - The changes in the DOM are css related.<br/>
+ * - It seems like when the class attribute is set on push, the textarea revert
+ * to the height defined by the rows attribute.<br/>
+ * - The size is reseted on onStateChange where the size is set to the one from
+ * the state. And it's because, when the user changes the text, at the next poll
+ * the state will confirm the change of the text, but the width and height
+ * didn't change in the state either client or server before the fix.
+ *
+ * @since
+ * @author Vaadin Ltd
+ */
+public class TextAreaSizeResetted extends AbstractTestUI {
+
+    public static final int TEXTAREAHEIGHT = 200;
+    public static final int TEXTAREAWIDTH = 200;
+
+    CssLayout layout = new CssLayout() {
+        @Override
+        protected String getCss(Component c) {
+            if (c instanceof TextArea) {
+                return "resize:both";
+            }
+
+            return super.getCss(c);
+        }
+    };
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        setPollInterval(500); // Short polling like 100ms jams up the TestBench
+                              // waitForVaadin -functionality.
+
+        final Label pollIndicator = new Label();
+        pollIndicator.setId("pollIndicator");
+
+        final TextField textField = new TextField("height");
+
+        final TextArea textArea = new TextArea();
+        textArea.setHeight(TEXTAREAHEIGHT + "px");
+        textArea.setWidth(TEXTAREAWIDTH + "px");
+        textArea.setValue("This is a text.");
+
+        Button button = new Button("Change Height", new ClickListener() {
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+
+                textArea.setHeight(textField.getValue());
+            }
+        });
+
+        addComponent(layout);
+
+        layout.addComponent(textArea);
+        layout.addComponent(textField);
+        layout.addComponent(button);
+        layout.addComponent(pollIndicator);
+
+        addPollListener(new UIEvents.PollListener() {
+            @Override
+            public void poll(UIEvents.PollEvent event) {
+                pollIndicator.setValue(String.valueOf(System
+                        .currentTimeMillis()));
+            }
+        });
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "TextArea width/height change when user resize it, change the text then a poll come.";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 14080;
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/components/textarea/TextAreaSizeResettedTest.java b/uitest/src/com/vaadin/tests/components/textarea/TextAreaSizeResettedTest.java
new file mode 100644
index 0000000000..6365d00735
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/textarea/TextAreaSizeResettedTest.java
@@ -0,0 +1,127 @@
+package com.vaadin.tests.components.textarea;
+
+import static com.vaadin.tests.components.textarea.TextAreaSizeResetted.TEXTAREAHEIGHT;
+import static com.vaadin.tests.components.textarea.TextAreaSizeResetted.TEXTAREAWIDTH;
+import static org.hamcrest.CoreMatchers.is;
+import static org.junit.Assert.assertThat;
+
+import java.util.List;
+
+import org.junit.Test;
+import org.openqa.selenium.Dimension;
+import org.openqa.selenium.WebDriver;
+import org.openqa.selenium.interactions.Actions;
+import org.openqa.selenium.remote.DesiredCapabilities;
+import org.openqa.selenium.support.ui.ExpectedCondition;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.LabelElement;
+import com.vaadin.testbench.elements.TextAreaElement;
+import com.vaadin.testbench.elements.TextFieldElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class TextAreaSizeResettedTest extends MultiBrowserTest {
+
+    private final int OFFSET = 100;
+
+    @Override
+    public void setup() throws Exception {
+        super.setup();
+
+        openTestURL();
+    }
+
+    @Override
+    public List<DesiredCapabilities> getBrowsersToTest() {
+        return getBrowsersExcludingIE(); // IE8-11 don't support CSS resize.
+    }
+
+    @Test
+    public void textAreaIsNotResizedOnBlur() {
+
+        resizeAndAssertTextAreaTo(TEXTAREAHEIGHT, OFFSET);
+
+        getTextArea().sendKeys("foo");
+
+        moveFocusOutsideTextArea();
+
+        // We can't use a waitUntil to check the text area size here, because it
+        // won't release the focus from
+        // the text area, so we need to do use something else. This workaround
+        // uses a label which is updated to indicate
+        // polling, which should trigger a resize.
+        waitUntilPollingOccurs();
+
+        assertThat(getTextAreaHeight(), is(TEXTAREAHEIGHT + OFFSET));
+        assertThat(getTextAreaWidth(), is(TEXTAREAWIDTH + OFFSET));
+
+        waitUntilPollingOccurs();
+    }
+
+    private void moveFocusOutsideTextArea() {
+        $(TextFieldElement.class).first().focus();
+    }
+
+    private void resizeAndAssertTextAreaTo(int size, int offset) {
+        // Sanity check
+        assertThat(getTextAreaHeight(), is(size));
+        resizeTextAreaBy(offset);
+
+        assertThat(getTextAreaHeight(), is(size + offset));
+    }
+
+    private void resizeTextAreaBy(int offset) {
+        int resizeHandlerOffset = 10;
+        new Actions(getDriver())
+                .moveToElement(getTextArea(),
+                        TEXTAREAWIDTH - resizeHandlerOffset,
+                        TEXTAREAHEIGHT - resizeHandlerOffset).clickAndHold()
+                .moveByOffset(offset, offset).release().build().perform();
+    }
+
+    @Test
+    public void textAreaWidthIsPresevedOnHeightResize() {
+        resizeAndAssertTextAreaTo(TEXTAREAHEIGHT, OFFSET);
+
+        changeHeightTo(TEXTAREAHEIGHT + OFFSET + OFFSET);
+
+        assertThat(getTextAreaWidth(), is(TEXTAREAWIDTH + OFFSET));
+        assertThat(getTextAreaHeight(), is(TEXTAREAHEIGHT + OFFSET + OFFSET));
+    }
+
+    private void changeHeightTo(int offset) {
+        $(TextFieldElement.class).first().sendKeys(String.valueOf(offset));
+        $(ButtonElement.class).first().click();
+    }
+
+    private void waitUntilPollingOccurs() {
+        final String timestamp = getPollTimestamp();
+
+        waitUntil(new ExpectedCondition<Boolean>() {
+            @Override
+            public Boolean apply(WebDriver input) {
+                return !timestamp.equals(getPollTimestamp());
+            }
+        });
+    }
+
+    private String getPollTimestamp() {
+        return $(LabelElement.class).id("pollIndicator").getText();
+    }
+
+    private int getTextAreaHeight() {
+        return getTextAreaSize().getHeight();
+    }
+
+    private int getTextAreaWidth() {
+        return getTextAreaSize().getWidth();
+    }
+
+    private Dimension getTextAreaSize() {
+        return getTextArea().getSize();
+    }
+
+    private TextAreaElement getTextArea() {
+        return $(TextAreaElement.class).first();
+    }
+}
\ No newline at end of file