Fix keyboard navigation for ListSelect (#8503)

Fixes vaadin/framework8-issues#463

2 files changed, 25 insertions, 6 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/VListSelect.java b/client/src/main/java/com/vaadin/client/ui/VListSelect.java
index 185c593b83..68d25bbe30 100644
--- a/client/src/main/java/com/vaadin/client/ui/VListSelect.java
+++ b/client/src/main/java/com/vaadin/client/ui/VListSelect.java
@@ -22,12 +22,13 @@ import java.util.Objects;
 import java.util.Set;
 import java.util.function.BiConsumer;
 
-import com.google.gwt.event.dom.client.ClickEvent;
-import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.ChangeEvent;
+import com.google.gwt.event.dom.client.ChangeHandler;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.HasEnabled;
 import com.google.gwt.user.client.ui.ListBox;
+
 import com.vaadin.client.FastStringSet;
 import com.vaadin.client.Focusable;
 import com.vaadin.client.connectors.AbstractMultiSelectConnector.MultiSelectWidget;
@@ -40,7 +41,7 @@ import elemental.json.JsonObject;
  *
  * @author Vaadin Ltd
  */
-public class VListSelect extends Composite implements ClickHandler, Field,
+public class VListSelect extends Composite implements ChangeHandler, Field,
         Focusable, HasEnabled, MultiSelectWidget {
 
     private List<BiConsumer<Set<String>, Set<String>>> selectionChangeListeners = new ArrayList<>();
@@ -63,7 +64,7 @@ public class VListSelect extends Composite implements ClickHandler, Field,
 
         select = new ListBox();
         select.setMultipleSelect(true);
-        select.addClickHandler(this);
+        select.addChangeHandler(this);
 
         container.add(select);
 
@@ -161,8 +162,8 @@ public class VListSelect extends Composite implements ClickHandler, Field,
     }
 
     @Override
-    public void onClick(ClickEvent event) {
-        if (event.getSource() == select) {
+    public void onChange(ChangeEvent changeEvent) {
+        if (changeEvent.getSource() == select) {
             // selection can change by adding and at the same time removing
             // previous keys, or by just adding (e.g. when modifier keys are
             // pressed)
diff --git a/uitest/src/test/java/com/vaadin/tests/components/listselect/ListSelectTest.java b/uitest/src/test/java/com/vaadin/tests/components/listselect/ListSelectTest.java
index 9262b9ba49..e256a9c525 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/listselect/ListSelectTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/listselect/ListSelectTest.java
@@ -13,6 +13,7 @@ import org.junit.Assert;
 import org.junit.Before;
 import org.junit.Test;
 import org.openqa.selenium.By;
+import org.openqa.selenium.Keys;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.support.ui.Select;
 
@@ -69,6 +70,23 @@ public class ListSelectTest extends SingleBrowserTestPhantomJS2 {
     }
 
     @Test
+    public void keyboardSelect() {
+        selectMenuPath("Component", "Listeners", "Selection listener");
+
+        selectItem("Item 4");
+        Assert.assertEquals("1. Selected: [Item 4]", getLogRow(0));
+
+        getListSelect().findElement(By.tagName("select")).sendKeys(Keys.ARROW_UP);
+
+        Assert.assertEquals("2. Selected: [Item 3]", getLogRow(0));
+
+        getListSelect().findElement(By.tagName("select")).sendKeys(Keys.ARROW_DOWN, Keys.ARROW_DOWN);
+
+        Assert.assertEquals("4. Selected: [Item 5]", getLogRow(0));
+
+    }
+
+    @Test
     public void disabled_clickToSelect() {
         selectMenuPath("Component", "State", "Enabled");