You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2022/05/04 13:40:48 UTC
[myfaces-tobago] 01/02: fix(shuttle): change event
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch tobago-5.x
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit c0f5c62c877a2185f300d446eb1e3ebb067271ba
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Tue May 3 17:46:46 2022 +0200
fix(shuttle): change event
Event bubbling must be stopped, because a change event is dispatched if an option tag is clicked.
But the change event should only be executed if an entry is moved to/from the right side.
* add test
Issue: TOBAGO-2130
---
.../example/demo/SelectManyShuttleController.java | 5 +++
.../content/900-test/2200-shuttle/shuttle.test.js | 41 ++++++++++++++++++++++
.../content/900-test/2200-shuttle/shuttle.xhtml | 33 +++++++++++++++++
.../src/main/ts/tobago-select-many-shuttle.ts | 7 ++++
4 files changed, 86 insertions(+)
diff --git a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/SelectManyShuttleController.java b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/SelectManyShuttleController.java
index f607417fbb..6685b5a626 100644
--- a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/SelectManyShuttleController.java
+++ b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/SelectManyShuttleController.java
@@ -38,6 +38,7 @@ public class SelectManyShuttleController implements Serializable {
private SolarObject[] selectedPlanets = new SolarObject[0];
private List<String> stars = Arrays.asList("Proxima Centauri", "Alpha Centauri", "Wolf 359", "Sirius");
private String[] selectedStars = new String[0];
+ private int countPageReload = 0;
@PostConstruct
public void init() {
@@ -75,4 +76,8 @@ public class SelectManyShuttleController implements Serializable {
public String getSelectedStarsAsString() {
return Arrays.toString(selectedStars);
}
+
+ public int getCountPageReload() {
+ return countPageReload++;
+ }
}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2200-shuttle/shuttle.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2200-shuttle/shuttle.test.js
new file mode 100644
index 0000000000..a54a75d220
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2200-shuttle/shuttle.test.js
@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+ */
+
+import {elementByIdFn, querySelectorAllFn, querySelectorFn} from "/script/tobago-test.js";
+import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
+
+it("Select 'Bordered' move it to the right", function (done) {
+ const unselectedFn = elementByIdFn("page:mainForm:shuttle::unselected");
+ const unselectedOptionsFn = querySelectorAllFn(".tobago-unselected option");
+ const selectedOptionsFn = querySelectorAllFn(".tobago-selected option");
+ const addButtonFn = elementByIdFn("page:mainForm:shuttle::add");
+ const removeAllButtonFn = elementByIdFn("page:mainForm:shuttle::removeAll");
+ const outputFn = querySelectorFn("#page\\:mainForm\\:reloadCounter .form-control-plaintext");
+
+ let counter;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => unselectedOptionsFn().length === 5, "click", removeAllButtonFn);
+ test.do(() => counter = Number(outputFn().textContent));
+ test.do(() => unselectedFn().selectedIndex = 2);
+ test.do(() => unselectedFn().dispatchEvent(new Event("change", {bubbles: true})));
+ test.event("click", addButtonFn, () => selectedOptionsFn().length > 0);
+ test.do(() => expect(selectedOptionsFn().length).toBe(1));
+ test.do(() => expect(selectedOptionsFn()[0].value).toBe("bordered"));
+ test.do(() => expect(Number(outputFn().textContent)).toBe(counter + 1));
+ test.start();
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2200-shuttle/shuttle.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2200-shuttle/shuttle.xhtml
new file mode 100644
index 0000000000..3c958db07d
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/2200-shuttle/shuttle.xhtml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You 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.
+-->
+
+<ui:composition template="/main.xhtml"
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+ <tc:selectManyShuttle id="shuttle">
+ <tc:event/>
+ <tc:selectItem itemLabel="Dark" itemValue="dark"/>
+ <tc:selectItem itemLabel="Striped" itemValue="striped"/>
+ <tc:selectItem itemLabel="Bordered" itemValue="bordered"/>
+ <tc:selectItem itemLabel="Hover" itemValue="hover"/>
+ <tc:selectItem itemLabel="Small" itemValue="small"/>
+ </tc:selectManyShuttle>
+ <tc:out id="reloadCounter" label="Page reload counter" value="#{selectManyShuttleController.countPageReload}"/>
+</ui:composition>
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-shuttle.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-shuttle.ts
index 1be8090339..48f5fa6cae 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-shuttle.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-shuttle.ts
@@ -24,6 +24,13 @@ class SelectManyShuttle extends HTMLElement {
}
connectedCallback(): void {
+ /*
+ * Event bubbling must be stopped, because a change event is dispatched if an option tag is clicked.
+ * But the change event should only be executed if an entry is moved to/from the right side.
+ */
+ this.unselectedSelect.onchange = (event) => event.stopPropagation();
+ this.selectedSelect.onchange = (event) => event.stopPropagation();
+
this.unselectedSelect.addEventListener("focus", Focus.setLastFocusId);
this.selectedSelect.addEventListener("focus", Focus.setLastFocusId);