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 2023/11/22 14:13:56 UTC
(myfaces-tobago) 01/02: fix(command): stop event propagation
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 79c9a74a895e8876534a589181c6b0992919668a
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Wed Nov 22 13:53:34 2023 +0100
fix(command): stop event propagation
* revert changes on tobago-behavior because it's to general
* fix the issue directly in sheet
* add test
Issue: TOBAGO-2263
---
.../50-button-in-sheet/Button_in_sheet.test.js | 104 +++++++++++++++++++++
.../50-button-in-sheet/Button_in_sheet.xhtml | 61 ++++++++++++
.../src/main/ts/tobago-sheet.ts | 31 ++++++
3 files changed, 196 insertions(+)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.test.js
new file mode 100644
index 0000000000..78ab972873
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.test.js
@@ -0,0 +1,104 @@
+/*
+ * 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("submit button", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const submitButton = elementByIdFn("page:mainForm:sheet:0:submitButton")
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.event("click", submitButton, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
+
+it("ajax button", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const ajaxButton = elementByIdFn("page:mainForm:sheet:0:ajaxButton")
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.event("click", ajaxButton, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
+
+it("submit button in panel", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const submitButton = elementByIdFn("page:mainForm:sheet:0:submitPanelButton")
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.event("click", submitButton, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
+
+it("ajax button in panel", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const ajaxButton = elementByIdFn("page:mainForm:sheet:0:ajaxPanelButton")
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.event("click", ajaxButton, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
+
+it("select 'gamma' from list", function (done) {
+ const timestampFn = querySelectorFn("#page\\:mainForm\\:timestamp .form-control-plaintext");
+ const selected = elementByIdFn("page:mainForm:sheet::selected")
+ const sun = elementByIdFn("page:mainForm:sheet:1:outOrbit")
+ const listField = elementByIdFn("page:mainForm:sheet:0:list::field")
+ const listOptions = querySelectorAllFn("#page\\:mainForm\\:sheet\\:0\\:list option");
+
+ let timestamp;
+
+ const test = new JasmineTestTool(done);
+ test.setup(() => selected().value === "[1]", null, "click", sun);
+ test.do(() => timestamp = timestampFn().textContent);
+ test.do(() => listOptions().item(0).selected = false);
+ test.do(() => listOptions().item(1).selected = false);
+ test.do(() => listOptions().item(2).selected = true); //Gamma
+ test.do(() => listOptions().item(3).selected = false);
+ test.event("change", listField, () => timestamp !== timestampFn().textContent);
+ test.do(() => expect(selected().value).toEqual("[1]"));
+ test.start();
+});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.xhtml
new file mode 100644
index 0000000000..b1228d7433
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/3000-sheet/50-button-in-sheet/Button_in_sheet.xhtml
@@ -0,0 +1,61 @@
+<?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:f="http://xmlns.jcp.org/jsf/core"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+
+ <tc:out id="timestamp" label="Timestamp" value="#{eventController.currentTimestamp}"/>
+
+ <tc:sheet id="sheet" value="#{sheetController.solarList}" var="object" rows="4">
+ <tc:style maxHeight="500px"/>
+ <tc:column label="Name">
+ <tc:button id="submitButton" label="Submit"/>
+ <tc:button id="ajaxButton" label="Ajax"/>
+ <tc:link id="link" label="apache" link="https://www.apache.org/"/>
+ </tc:column>
+ <tc:column label="Orbit">
+ <tc:panel>
+ <tc:button id="submitPanelButton" label="Submit"/>
+ <tc:button id="ajaxPanelButton" label="Ajax">
+ <f:ajax render=":::timestamp"/>
+ </tc:button>
+ </tc:panel>
+ <tc:out id="outOrbit" value="#{object.orbit}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="Period (Days)">
+ <tc:selectOneListbox id="list" label="List" size="3">
+ <tc:selectItem itemLabel="Alpha"/>
+ <tc:selectItem itemLabel="Beta"/>
+ <tc:selectItem itemLabel="Gamma"/>
+ <tc:selectItem itemLabel="Delta"/>
+ <f:ajax render=":::timestamp"/>
+ </tc:selectOneListbox>
+ <tc:out value="#{object.period}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="Discoverer">
+ <tc:out value="#{object.discoverer}" labelLayout="skip"/>
+ </tc:column>
+ <tc:column label="Year">
+ <tc:out value="#{object.discoverYear}" labelLayout="skip"/>
+ </tc:column>
+ </tc:sheet>
+</ui:composition>
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
index a9f1c3bb68..73753dc080 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-sheet.ts
@@ -626,6 +626,37 @@ Type: ${data.type}`);
}
clickOnRow(event: MouseEvent): void {
+ let clickElement: HTMLElement = event.target as HTMLElement;
+ while (clickElement.tagName !== "TR") {
+ if (clickElement.tagName === "A"
+ || clickElement.tagName === "BUTTON"
+ || clickElement.tagName === "TOBAGO-DATE"
+ || clickElement.tagName === "TOBAGO-DROPDOWN"
+ || clickElement.tagName === "TOBAGO-FILE"
+ || clickElement.tagName === "TOBAGO-IN"
+ || clickElement.tagName === "TOBAGO-RANGE"
+ || clickElement.tagName === "TOBAGO-SELECT-BOOLEAN-CHECKBOX"
+ || clickElement.tagName === "TOBAGO-SELECT-BOOLEAN-TOGGLE"
+ || clickElement.tagName === "TOBAGO-SELECT-MANY-CHECKBOX"
+ || clickElement.tagName === "TOBAGO-SELECT-MANY-LIST"
+ || clickElement.tagName === "TOBAGO-SELECT-MANY-LISTBOX"
+ || clickElement.tagName === "TOBAGO-SELECT-MANY-SHUTTLE"
+ || clickElement.tagName === "TOBAGO-SELECT-ONE-CHOICE"
+ || clickElement.tagName === "TOBAGO-SELECT-ONE-LIST"
+ || clickElement.tagName === "TOBAGO-SELECT-ONE-LISTBOX"
+ || clickElement.tagName === "TOBAGO-SELECT-ONE-RADIO"
+ || clickElement.tagName === "TOBAGO-STARS"
+ || clickElement.tagName === "TOBAGO-TAB-GROUP"
+ || clickElement.tagName === "TOBAGO-TEXTAREA"
+ || clickElement.tagName === "TOBAGO-TREE"
+ || clickElement.tagName === "BUTTON") {
+ // click on a button/link/form-component should not select row TOBAGO-2263
+ return;
+ } else {
+ clickElement = clickElement.parentElement;
+ }
+ }
+
const row = event.currentTarget as HTMLTableRowElement;
if (row.classList.contains(Css.TOBAGO_SELECTED) || !Sheet.isInputElement(row)) {