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/06/12 07:17:45 UTC
[myfaces-tobago] branch main updated (1495204b5e -> 9f64ba2586)
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a change to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
from 1495204b5e build(deps): bump liberty-maven-plugin from 3.8 to 3.8.1
new 8a99895b94 fix(select[One/Many]List): events
new 9f64ba2586 build(theme): rebuild after fixing select[One/Many]List events
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../myfaces/tobago/component/SupportFieldId.java | 4 ---
.../component/AbstractUISelectManyList.java | 8 +-----
.../component/AbstractUISelectOneList.java | 5 ----
.../renderkit/renderer/SelectManyListRenderer.java | 16 ++++++------
.../renderkit/renderer/SelectOneListRenderer.java | 16 ++++++------
.../renderer/TobagoClientBehaviorRenderer.java | 2 +-
.../component/SelectManyListTagDeclaration.java | 20 +++++----------
.../component/SelectOneListTagDeclaration.java | 1 -
.../selectManyList/selectManyListAjax.html | 6 ++---
.../renderer/selectOneList/selectOneListAjax.html | 6 ++---
.../80-selectManyList/SelectManyList.test.js | 14 +++++-----
.../content/900-test/6000-event/Event.test.js | 30 ++++++++++++++++++++++
.../webapp/content/900-test/6000-event/Event.xhtml | 2 +-
...neListbox.xhtml => x-event-selectOneList.xhtml} | 4 +--
.../tobago-theme-standard/src/main/js/tobago.js | 6 ++---
.../src/main/js/tobago.js.map | 2 +-
.../src/main/ts/tobago-select-list-base.ts | 22 ++++++++++++++--
.../src/main/ts/tobago-select-many-list.ts | 12 +++++++--
.../src/main/ts/tobago-select-one-list.ts | 12 ++++++---
19 files changed, 113 insertions(+), 75 deletions(-)
copy tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/{x-event-selectOneListbox.xhtml => x-event-selectOneList.xhtml} (95%)
[myfaces-tobago] 01/02: fix(select[One/Many]List): events
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 8a99895b942a3372c856e7f7c1f4439c79857a49
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Jun 5 15:32:55 2023 +0200
fix(select[One/Many]List): events
* make click/dblclick/focus/blur events work
* fix: change event with tc:event
* getFieldIdForBehavior() removed; The hidden select component has now the field id.
* a click on a label or an error message (label for attribute) focus the component
* remove "input" event from supported behavior list. Use the change event instead.
* adjust tests
* add event test
Issue: TOBAGO-2220
---
.../myfaces/tobago/component/SupportFieldId.java | 4 --
.../component/AbstractUISelectManyList.java | 8 +---
.../component/AbstractUISelectOneList.java | 5 --
.../renderkit/renderer/SelectManyListRenderer.java | 16 +++----
.../renderkit/renderer/SelectOneListRenderer.java | 16 +++----
.../renderer/TobagoClientBehaviorRenderer.java | 2 +-
.../component/SelectManyListTagDeclaration.java | 20 +++-----
.../component/SelectOneListTagDeclaration.java | 1 -
.../selectManyList/selectManyListAjax.html | 6 +--
.../renderer/selectOneList/selectOneListAjax.html | 6 +--
.../80-selectManyList/SelectManyList.test.js | 14 +++---
.../content/900-test/6000-event/Event.test.js | 30 ++++++++++++
.../webapp/content/900-test/6000-event/Event.xhtml | 2 +-
.../6000-event/x-event-selectOneList.xhtml | 55 ++++++++++++++++++++++
.../src/main/ts/tobago-select-list-base.ts | 22 ++++++++-
.../src/main/ts/tobago-select-many-list.ts | 12 ++++-
.../src/main/ts/tobago-select-one-list.ts | 12 +++--
17 files changed, 162 insertions(+), 69 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/SupportFieldId.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/SupportFieldId.java
index eea260a3b1..3205c79233 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/SupportFieldId.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/SupportFieldId.java
@@ -24,8 +24,4 @@ import jakarta.faces.context.FacesContext;
public interface SupportFieldId {
String getFieldId(FacesContext facesContext);
-
- default String getFieldIdForBehavior(FacesContext facesContext) {
- return getFieldId(facesContext);
- }
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectManyList.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectManyList.java
index 0b8b99794a..5a15c39ed4 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectManyList.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectManyList.java
@@ -56,11 +56,6 @@ public abstract class AbstractUISelectManyList extends AbstractUISelectManyBase
return getClientId(facesContext) + ComponentUtils.SUB_SEPARATOR + "field";
}
- @Override
- public String getFieldIdForBehavior(FacesContext facesContext) {
- return getClientId(facesContext) + ComponentUtils.SUB_SEPARATOR + "selected";
- }
-
public abstract Integer getTabIndex();
public abstract boolean isDisabled();
@@ -69,8 +64,7 @@ public abstract class AbstractUISelectManyList extends AbstractUISelectManyBase
public boolean isError() {
final FacesContext facesContext = FacesContext.getCurrentInstance();
- return !isValid()
- || !facesContext.getMessageList(getClientId(facesContext)).isEmpty();
+ return !isValid() || !facesContext.getMessageList(getClientId(facesContext)).isEmpty();
}
public abstract boolean isFocus();
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectOneList.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectOneList.java
index 9a8fb3a376..5ae6226f3f 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectOneList.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUISelectOneList.java
@@ -30,11 +30,6 @@ public abstract class AbstractUISelectOneList extends AbstractUISelectOneBase im
return getClientId(facesContext) + ComponentUtils.SUB_SEPARATOR + "field";
}
- @Override
- public String getFieldIdForBehavior(FacesContext facesContext) {
- return getClientId(facesContext) + ComponentUtils.SUB_SEPARATOR + "selected";
- }
-
public abstract String getFilter();
public abstract boolean isExpanded();
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListRenderer.java
index cef8cd7e0a..b81f884c6f 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyListRenderer.java
@@ -70,8 +70,8 @@ public class SelectManyListRenderer<T extends AbstractUISelectManyList> extends
final String clientId = component.getClientId(facesContext);
final String fieldId = component.getFieldId(facesContext);
+ final String selectFieldId = clientId + ComponentUtils.SUB_SEPARATOR + "selectField";
final String filterId = clientId + ComponentUtils.SUB_SEPARATOR + "filter";
- final String selectedId = clientId + ComponentUtils.SUB_SEPARATOR + "selected";
final List<SelectItem> items = SelectItemUtils.getItemList(facesContext, component);
final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || component.isReadonly();
final String filter = component.getFilter();
@@ -79,7 +79,7 @@ public class SelectManyListRenderer<T extends AbstractUISelectManyList> extends
final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, component);
final Integer tabIndex = component.getTabIndex();
- encodeHiddenSelect(facesContext, component, items, clientId, selectedId, disabled);
+ encodeHiddenSelect(facesContext, component, items, clientId, fieldId, disabled);
writer.startElement(HtmlElements.DIV);
writer.writeClassAttribute(
@@ -87,7 +87,7 @@ public class SelectManyListRenderer<T extends AbstractUISelectManyList> extends
expanded ? BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)) : null);
encodeSelectField(facesContext, component,
- clientId, fieldId, filterId, filter, disabled, expanded, title, tabIndex);
+ clientId, selectFieldId, filterId, filter, disabled, expanded, title, tabIndex);
encodeOptions(facesContext, component, items, clientId, expanded, disabled);
writer.endElement(HtmlElements.DIV);
@@ -102,11 +102,11 @@ public class SelectManyListRenderer<T extends AbstractUISelectManyList> extends
private void encodeHiddenSelect(
final FacesContext facesContext, final T component, final List<SelectItem> items,
- final String clientId, final String selectedId, final boolean disabled) throws IOException {
+ final String clientId, final String fieldId, final boolean disabled) throws IOException {
final TobagoResponseWriter writer = getResponseWriter(facesContext);
writer.startElement(HtmlElements.SELECT);
- writer.writeIdAttribute(selectedId);
+ writer.writeIdAttribute(fieldId);
writer.writeNameAttribute(clientId);
writer.writeAttribute(HtmlAttributes.DISABLED, disabled);
writer.writeAttribute(HtmlAttributes.REQUIRED, component.isRequired());
@@ -121,12 +121,12 @@ public class SelectManyListRenderer<T extends AbstractUISelectManyList> extends
private void encodeSelectField(
final FacesContext facesContext, final T component,
- final String clientId, final String fieldId, final String filterId, final String filter, final boolean disabled,
- final boolean expanded, final String title, final Integer tabIndex) throws IOException {
+ final String clientId, final String selectFieldId, final String filterId, final String filter,
+ final boolean disabled, final boolean expanded, final String title, final Integer tabIndex) throws IOException {
final TobagoResponseWriter writer = getResponseWriter(facesContext);
writer.startElement(HtmlElements.DIV);
- writer.writeIdAttribute(fieldId);
+ writer.writeIdAttribute(selectFieldId);
writer.writeNameAttribute(clientId);
HtmlRendererUtils.writeDataAttributes(facesContext, writer, component);
writer.writeClassAttribute(
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListRenderer.java
index 3584cc4589..c73a1fec80 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListRenderer.java
@@ -48,8 +48,8 @@ public class SelectOneListRenderer<T extends AbstractUISelectOneList> extends Se
final String clientId = component.getClientId(facesContext);
final String fieldId = component.getFieldId(facesContext);
+ final String selectFieldId = clientId + ComponentUtils.SUB_SEPARATOR + "selectField";
final String filterId = clientId + ComponentUtils.SUB_SEPARATOR + "filter";
- final String selectedId = clientId + ComponentUtils.SUB_SEPARATOR + "selected";
final List<SelectItem> items = SelectItemUtils.getItemList(facesContext, component);
final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || component.isReadonly();
final String filter = component.getFilter();
@@ -57,7 +57,7 @@ public class SelectOneListRenderer<T extends AbstractUISelectOneList> extends Se
final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, component);
final Integer tabIndex = component.getTabIndex();
- encodeHiddenSelect(facesContext, component, items, clientId, selectedId, disabled);
+ encodeHiddenSelect(facesContext, component, items, clientId, fieldId, disabled);
writer.startElement(HtmlElements.DIV);
writer.writeClassAttribute(
@@ -65,7 +65,7 @@ public class SelectOneListRenderer<T extends AbstractUISelectOneList> extends Se
expanded ? BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)) : null);
encodeSelectField(facesContext, component,
- clientId, fieldId, filterId, filter, disabled, expanded, title, tabIndex);
+ clientId, selectFieldId, filterId, filter, disabled, expanded, title, tabIndex);
encodeOptions(facesContext, component, items, clientId, expanded, disabled);
writer.endElement(HtmlElements.DIV);
@@ -73,11 +73,11 @@ public class SelectOneListRenderer<T extends AbstractUISelectOneList> extends Se
private void encodeHiddenSelect(
final FacesContext facesContext, final T component, final List<SelectItem> items,
- final String clientId, final String selectedId, final boolean disabled) throws IOException {
+ final String clientId, final String fieldId, final boolean disabled) throws IOException {
final TobagoResponseWriter writer = getResponseWriter(facesContext);
writer.startElement(HtmlElements.SELECT);
- writer.writeIdAttribute(selectedId);
+ writer.writeIdAttribute(fieldId);
writer.writeNameAttribute(clientId);
writer.writeAttribute(HtmlAttributes.DISABLED, disabled);
writer.writeAttribute(HtmlAttributes.REQUIRED, component.isRequired());
@@ -90,12 +90,12 @@ public class SelectOneListRenderer<T extends AbstractUISelectOneList> extends Se
private void encodeSelectField(
final FacesContext facesContext, final T component,
- final String clientId, final String fieldId, final String filterId, final String filter, final boolean disabled,
- final boolean expanded, final String title, final Integer tabIndex) throws IOException {
+ final String clientId, final String selectFieldId, final String filterId, final String filter,
+ final boolean disabled, final boolean expanded, final String title, final Integer tabIndex) throws IOException {
final TobagoResponseWriter writer = getResponseWriter(facesContext);
writer.startElement(HtmlElements.DIV);
- writer.writeIdAttribute(fieldId);
+ writer.writeIdAttribute(selectFieldId);
writer.writeNameAttribute(clientId);
HtmlRendererUtils.writeDataAttributes(facesContext, writer, component);
writer.writeClassAttribute(
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TobagoClientBehaviorRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TobagoClientBehaviorRenderer.java
index a114d0dd8f..c901cd5038 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TobagoClientBehaviorRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TobagoClientBehaviorRenderer.java
@@ -87,7 +87,7 @@ public class TobagoClientBehaviorRenderer extends jakarta.faces.render.ClientBeh
final Collection<String> render = ajaxBehavior.getRender();
clientId = uiComponent.getClientId(facesContext);
if (uiComponent instanceof SupportFieldId) {
- fieldId = ((SupportFieldId) uiComponent).getFieldIdForBehavior(facesContext);
+ fieldId = ((SupportFieldId) uiComponent).getFieldId(facesContext);
}
executeIds = ComponentUtils.evaluateClientIds(facesContext, uiComponent, execute.toArray(new String[0]));
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectManyListTagDeclaration.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectManyListTagDeclaration.java
index cde9c52e8d..1a6758a47a 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectManyListTagDeclaration.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectManyListTagDeclaration.java
@@ -32,12 +32,12 @@ import org.apache.myfaces.tobago.internal.taglib.declaration.HasAutoSpacing;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasBinding;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasConverter;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasConverterMessage;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasDecorationPosition;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasFilter;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasHelp;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasId;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasLabel;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasLabelLayout;
-import org.apache.myfaces.tobago.internal.taglib.declaration.HasDecorationPosition;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasRequiredMessageForSelect;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasTabIndex;
import org.apache.myfaces.tobago.internal.taglib.declaration.HasTip;
@@ -64,19 +64,11 @@ import org.apache.myfaces.tobago.internal.taglib.declaration.IsVisual;
rendererType = RendererTypes.SELECT_MANY_LIST,
allowedChildComponenents = {"jakarta.faces.SelectItem", "jakarta.faces.SelectItems"},
behaviors = {
- @Behavior(
- name = ClientBehaviors.CHANGE,
- isDefault = true),
- @Behavior(
- name = ClientBehaviors.INPUT),
- @Behavior(
- name = ClientBehaviors.CLICK),
- @Behavior(
- name = ClientBehaviors.DBLCLICK),
- @Behavior(
- name = ClientBehaviors.FOCUS),
- @Behavior(
- name = ClientBehaviors.BLUR)
+ @Behavior(name = ClientBehaviors.CHANGE, isDefault = true),
+ @Behavior(name = ClientBehaviors.CLICK),
+ @Behavior(name = ClientBehaviors.DBLCLICK),
+ @Behavior(name = ClientBehaviors.FOCUS),
+ @Behavior(name = ClientBehaviors.BLUR)
})
public interface SelectManyListTagDeclaration
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectOneListTagDeclaration.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectOneListTagDeclaration.java
index 7f7c01959b..4f59c85b54 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectOneListTagDeclaration.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/SelectOneListTagDeclaration.java
@@ -64,7 +64,6 @@ import org.apache.myfaces.tobago.internal.taglib.declaration.IsVisual;
allowedChildComponenents = {"jakarta.faces.SelectItem", "jakarta.faces.SelectItems"},
behaviors = {
@Behavior(name = ClientBehaviors.CHANGE, isDefault = true),
- @Behavior(name = ClientBehaviors.INPUT),
@Behavior(name = ClientBehaviors.CLICK),
@Behavior(name = ClientBehaviors.DBLCLICK),
@Behavior(name = ClientBehaviors.FOCUS),
diff --git a/tobago-core/src/test/resources/renderer/selectManyList/selectManyListAjax.html b/tobago-core/src/test/resources/renderer/selectManyList/selectManyListAjax.html
index a68d057a0c..295f2a96aa 100644
--- a/tobago-core/src/test/resources/renderer/selectManyList/selectManyListAjax.html
+++ b/tobago-core/src/test/resources/renderer/selectManyList/selectManyListAjax.html
@@ -16,13 +16,13 @@
-->
<tobago-select-many-list id='id' class='tobago-auto-spacing'>
- <select id='id::selected' name='id' class='d-none' multiple='multiple'>
+ <select id='id::field' name='id' class='d-none' multiple='multiple'>
<option value='Stratocaster'>Stratocaster
</option>
<option value='Telecaster'>Telecaster
</option></select>
<div class='dropdown'>
- <div id='id::field' name='id' class='form-select tobago-select-field dropdown-toggle' aria-expanded='false'>
+ <div id='id::selectField' name='id' class='form-select tobago-select-field dropdown-toggle' aria-expanded='false'>
<input type='search' id='id::filter' class='tobago-filter form-control' autocomplete='off' readonly='readonly'>
</div>
<div class='tobago-options tobago-dropdown-menu' name='id'>
@@ -46,5 +46,5 @@
</table>
</div>
</div>
- <tobago-behavior event='change' client-id='id' field-id='id::selected' execute='id'></tobago-behavior>
+ <tobago-behavior event='change' client-id='id' field-id='id::field' execute='id'></tobago-behavior>
</tobago-select-many-list>
diff --git a/tobago-core/src/test/resources/renderer/selectOneList/selectOneListAjax.html b/tobago-core/src/test/resources/renderer/selectOneList/selectOneListAjax.html
index 79ebbf73f7..148808fa04 100644
--- a/tobago-core/src/test/resources/renderer/selectOneList/selectOneListAjax.html
+++ b/tobago-core/src/test/resources/renderer/selectOneList/selectOneListAjax.html
@@ -16,13 +16,13 @@
-->
<tobago-select-one-list id='id' class='tobago-auto-spacing'>
- <select id='id::selected' name='id' class='d-none'>
+ <select id='id::field' name='id' class='d-none'>
<option value='Stratocaster'>Stratocaster
</option>
<option value='Telecaster'>Telecaster
</option></select>
<div class='dropdown'>
- <div id='id::field' name='id' class='form-select tobago-select-field dropdown-toggle' aria-expanded='false'>
+ <div id='id::selectField' name='id' class='form-select tobago-select-field dropdown-toggle' aria-expanded='false'>
<span></span>
<input type='search' id='id::filter' class='tobago-filter form-control' autocomplete='off' readonly='readonly'>
</div>
@@ -47,5 +47,5 @@
</table>
</div>
</div>
- <tobago-behavior event='change' client-id='id' field-id='id::selected' execute='id'></tobago-behavior>
+ <tobago-behavior event='change' client-id='id' field-id='id::field' execute='id'></tobago-behavior>
</tobago-select-one-list>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectManyList/SelectManyList.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectManyList/SelectManyList.test.js
index e980348b78..ed037558c7 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectManyList/SelectManyList.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectManyList/SelectManyList.test.js
@@ -19,14 +19,14 @@ import {JasmineTestTool} from "/tobago/test/tobago-test-tool.js";
import {elementByIdFn, querySelectorAllFn, querySelectorFn} from "/script/tobago-test.js";
it("Standard: remove 'Earth'", function (done) {
- const removeEarthButtonFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedStandard\\:\\:field .btn-group[data-tobago-value='Earth'] .tobago-button");
- const badgeVenusFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedStandard\\:\\:field .btn-group[data-tobago-value='Venus']");
- const badgeEarthFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedStandard\\:\\:field .btn-group[data-tobago-value='Earth']");
- const badgeJupiterFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedStandard\\:\\:field .btn-group[data-tobago-value='Jupiter']");
+ const removeEarthButtonFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedStandard\\:\\:selectField .btn-group[data-tobago-value='Earth'] .tobago-button");
+ const badgeVenusFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedStandard\\:\\:selectField .btn-group[data-tobago-value='Venus']");
+ const badgeEarthFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedStandard\\:\\:selectField .btn-group[data-tobago-value='Earth']");
+ const badgeJupiterFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedStandard\\:\\:selectField .btn-group[data-tobago-value='Jupiter']");
const selectedRowsFn = querySelectorAllFn("#page\\:mainForm\\:basic\\:selectedStandard tr.table-primary");
- const disabledBadgeVenusFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedDisabled\\:\\:field .btn-group[data-tobago-value='Venus']");
- const disabledBadgeEarthFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedDisabled\\:\\:field .btn-group[data-tobago-value='Earth']");
- const disabledBadgeJupiterFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedDisabled\\:\\:field .btn-group[data-tobago-value='Jupiter']");
+ const disabledBadgeVenusFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedDisabled\\:\\:selectField .btn-group[data-tobago-value='Venus']");
+ const disabledBadgeEarthFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedDisabled\\:\\:selectField .btn-group[data-tobago-value='Earth']");
+ const disabledBadgeJupiterFn = querySelectorFn("#page\\:mainForm\\:basic\\:selectedDisabled\\:\\:selectField .btn-group[data-tobago-value='Jupiter']");
const submitFn = elementByIdFn("page:mainForm:basic:submit");
const resetFn = elementByIdFn("page:mainForm:basic:reset");
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/Event.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/Event.test.js
index 8bd1a4ecc3..ad43cba9cd 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/Event.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/Event.test.js
@@ -71,6 +71,28 @@ it("tc:selectBooleanCheckbox", function (done) {
test.start();
});
+it("tc:selectOneList", function (done) {
+ const eventNames = ["change", "focus", "blur"];
+ const eventComponentFn = elementByIdFn("page:mainForm:selectOneListevent::field");
+ const ajaxComponentFn = elementByIdFn("page:mainForm:selectOneListajax::field");
+
+ const clickEventNames = ["click", "dblclick"];
+ const clickEventComponentFn = elementByIdFn("page:mainForm:selectOneListevent::selectField");
+
+ const changeValueFn = function (componentFn) {
+ if (componentFn().closest("tobago-select-one-list").querySelectorAll("option")[0].selected) {
+ componentFn().closest("tobago-select-one-list").querySelectorAll("option")[1].selected = true;
+ } else {
+ componentFn().closest("tobago-select-one-list").querySelectorAll("option")[0].selected = true;
+ }
+ };
+
+ const test = new JasmineTestTool(done);
+ createSteps(test, "selectOneList", eventNames, eventComponentFn, ajaxComponentFn, changeValueFn);
+ createSteps(test, "selectOneList", clickEventNames, clickEventComponentFn, ajaxComponentFn, changeValueFn);
+ test.start();
+});
+
it("tc:selectOneListbox", function (done) {
const eventNames = ["change", "click", "dblclick", "focus", "blur"];
const eventComponentFn = elementByIdFn("page:mainForm:selectOneListboxevent::field");
@@ -109,6 +131,7 @@ it("tc:textarea", function (done) {
});
function createSteps(test, componentName, eventNames, eventComponentFn, ajaxComponentFn, changeValueFn) {
+ const resetButtonFn = elementByIdFn("page:mainForm:reset");
const actionCountFn = elementByIdFn("page:mainForm:inAction::field");
const actionListenerCountFn = elementByIdFn("page:mainForm:inActionListener::field");
const ajaxListenerCountFn = elementByIdFn("page:mainForm:inAjaxListener::field");
@@ -138,6 +161,13 @@ function createSteps(test, componentName, eventNames, eventComponentFn, ajaxComp
test.do(() => oldTimestamp = parseInt(timestampFn().value));
test.event("click", selectorButton, () => parseInt(timestampFn().value) > oldTimestamp);
+ test.setup(() =>
+ parseInt(actionCountFn().value)
+ + parseInt(actionListenerCountFn().value)
+ + parseInt(ajaxListenerCountFn().value)
+ + parseInt(valueChangeListenerCountFn().value) === 0,
+ null, "click", resetButtonFn);
+
test.do(() => oldActionCount = parseInt(actionCountFn().value));
test.do(() => oldActionListenerCount = parseInt(actionListenerCountFn().value));
test.do(() => oldAjaxListenerCount = parseInt(ajaxListenerCountFn().value));
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/Event.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/Event.xhtml
index 396f0139d9..6d9ae69bc2 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/Event.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/Event.xhtml
@@ -27,7 +27,7 @@
<tc:box id="metrics" label="Metrics">
<f:facet name="bar">
- <tc:button label="Reset" action="#{eventController.reset}"/>
+ <tc:button id="reset" label="Reset" action="#{eventController.reset}"/>
</f:facet>
<tc:in id="inAction" label="Action" value="#{eventController.actionCount}" readonly="true" focus="true"/>
<tc:in id="inActionListener" label="ActionListener" value="#{eventController.actionListenerCount}"
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/x-event-selectOneList.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/x-event-selectOneList.xhtml
new file mode 100644
index 0000000000..9cb862cb4e
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/6000-event/x-event-selectOneList.xhtml
@@ -0,0 +1,55 @@
+<?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 xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
+ 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:selectOneList id="selectOneList#{eventType}" valueChangeListener="#{eventController.valueChangeListener}" expanded="true">
+ <tc:selectItem itemValue="alpha" itemLabel="Alpha"/>
+ <tc:selectItem itemValue="beta" itemLabel="Beta"/>
+ <tc:selectItem itemValue="gamma" itemLabel="Gamma"/>
+ <tc:selectItem itemValue="delta" itemLabel="Delta"/>
+ <c:if test="#{eventType == 'ajax'}">
+ <f:ajax event="change" render="metrics" listener="#{eventController.ajaxListener}"
+ disabled="#{eventName != 'change'}"/>
+ <f:ajax event="click" render="metrics" listener="#{eventController.ajaxListener}"
+ disabled="#{eventName != 'click'}"/>
+ <f:ajax event="dblclick" render="metrics" listener="#{eventController.ajaxListener}"
+ disabled="#{eventName != 'dblclick'}"/>
+ <f:ajax event="focus" render="metrics" listener="#{eventController.ajaxListener}"
+ disabled="#{eventName != 'focus'}"/>
+ <f:ajax event="blur" render="metrics" listener="#{eventController.ajaxListener}"
+ disabled="#{eventName != 'blur'}"/>
+ </c:if>
+ <c:if test="#{eventType == 'event'}">
+ <tc:event event="change" action="#{eventController.action}" actionListener="#{eventController.actionListener}"
+ rendered="#{eventName == 'change'}"/>
+ <tc:event event="click" action="#{eventController.action}" actionListener="#{eventController.actionListener}"
+ rendered="#{eventName == 'click'}"/>
+ <tc:event event="dblclick" action="#{eventController.action}" actionListener="#{eventController.actionListener}"
+ rendered="#{eventName == 'dblclick'}"/>
+ <tc:event event="focus" action="#{eventController.action}" actionListener="#{eventController.actionListener}"
+ rendered="#{eventName == 'focus'}"/>
+ <tc:event event="blur" action="#{eventController.action}" actionListener="#{eventController.actionListener}"
+ rendered="#{eventName == 'blur'}"/>
+ </c:if>
+ </tc:selectOneList>
+</ui:composition>
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
index a4117e55de..20ab4f6ce3 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-list-base.ts
@@ -32,10 +32,12 @@ export abstract class SelectListBase extends HTMLElement {
}
set focused(focused: boolean) {
- if (focused) {
+ if (focused && !this.focused) {
this.classList.add(Css.TOBAGO_FOCUS);
- } else {
+ this.hiddenSelect.dispatchEvent(new Event("focus", {bubbles: true}));
+ } else if (!focused && this.focused) {
this.classList.remove(Css.TOBAGO_FOCUS);
+ this.hiddenSelect.dispatchEvent(new Event("blur", {bubbles: true}));
}
}
@@ -96,6 +98,7 @@ export abstract class SelectListBase extends HTMLElement {
window.addEventListener("resize", () => this.updateDropdownMenuWidth());
}
document.addEventListener("click", this.globalClickEvent.bind(this));
+ this.hiddenSelect.addEventListener("click", this.labelClickEvent.bind(this));
this.selectField.addEventListener("keydown", this.keydownEventBase.bind(this));
this.filterInput.addEventListener("focus", this.focusEvent.bind(this));
this.filterInput.addEventListener("blur", this.blurEvent.bind(this));
@@ -110,10 +113,25 @@ export abstract class SelectListBase extends HTMLElement {
if (document.activeElement.id === this.filterInput.id) {
this.focusEvent();
}
+
+ // redirect click events for ajax behavior
+ this.selectField.addEventListener("click", () => this.hiddenSelect.dispatchEvent(new Event("click")));
+ this.options.addEventListener("click", () => this.hiddenSelect.dispatchEvent(new Event("click")));
+ this.selectField.addEventListener("dblclick", () => this.hiddenSelect.dispatchEvent(new Event("dblclick")));
+ this.options.addEventListener("dblclick", () => this.hiddenSelect.dispatchEvent(new Event("dblclick")));
}
protected abstract globalClickEvent(event: MouseEvent): void;
+ /**
+ * The label for attribute targets the hidden select field, so an event which is dispatched on the label is also
+ * dispatched on the hidden select field. This method must ensure that a click on a label focus the
+ * Select[One/Many]List component.
+ * @param event
+ * @protected
+ */
+ protected abstract labelClickEvent(event: MouseEvent): void;
+
private keydownEventBase(event: KeyboardEvent) {
switch (event.key) {
case Key.ESCAPE:
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
index a13aa46026..c89ddd4fd3 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many-list.ts
@@ -57,13 +57,21 @@ class SelectManyList extends SelectListBase {
}
}
+ protected labelClickEvent(event: MouseEvent): void {
+ event.stopPropagation(); // stop propagation to avoid execution of globalClickEvent()
+ if (!this.filterInput.disabled) {
+ this.filterInput.focus();
+ } else if (this.badgeCloseButtons.length > 0) {
+ this.badgeCloseButtons[0].focus();
+ }
+ }
+
protected select(row: HTMLTableRowElement): void {
const itemValue = row.dataset.tobagoValue;
const option: HTMLOptionElement = this.hiddenSelect.querySelector(`[value="${itemValue}"]`);
option.selected = !option.selected;
this.sync(option);
- const e = new Event("change");
- this.hiddenSelect.dispatchEvent(e);
+ this.hiddenSelect.dispatchEvent(new Event("change", {bubbles: true}));
}
private sync(option: HTMLOptionElement) {
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts
index 07389aaf34..ed72a2d149 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-one-list.ts
@@ -32,7 +32,7 @@ class SelectOneList extends SelectListBase {
this.selectField.querySelector("span").textContent = text;
}
- get selectedOption() :HTMLOptionElement {
+ get selectedOption(): HTMLOptionElement {
const value = this.hiddenSelect.value;
return this.hiddenSelect.querySelector(`[value="${value}"]`);
}
@@ -60,6 +60,13 @@ class SelectOneList extends SelectListBase {
}
}
+ protected labelClickEvent(event: MouseEvent): void {
+ event.stopPropagation(); // stop propagation to avoid execution of globalClickEvent()
+ if (!this.filterInput.disabled) {
+ this.filterInput.focus();
+ }
+ }
+
private keydownEvent(event: KeyboardEvent) {
switch (event.key) {
case Key.ESCAPE:
@@ -83,8 +90,7 @@ class SelectOneList extends SelectListBase {
option.selected = true;
this.filterInput.value = null;
this.sync();
- const e = new Event("change");
- this.hiddenSelect.dispatchEvent(e);
+ this.hiddenSelect.dispatchEvent(new Event("change", {bubbles: true}));
}
private sync() {
[myfaces-tobago] 02/02: build(theme): rebuild after fixing select[One/Many]List events
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 9f64ba2586f9c1d261f645eda7c1215aa186ece8
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Jun 12 08:58:31 2023 +0200
build(theme): rebuild after fixing select[One/Many]List events
---
tobago-theme/tobago-theme-standard/src/main/js/tobago.js | 6 +++---
tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map | 2 +-
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
index 169ef36b08..55eb8488f3 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js
@@ -4,16 +4,16 @@
* Copyright 2011-2023 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
-const Re=new Map,Me={set(e,t,s){Re.has(e)||Re.set(e,new Map);const n=Re.get(e);n.has(t)||0===n.size?n.set(t,s):console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(n.keys())[0]}.`)},get:(e,t)=>Re.has(e)&&Re.get(e).get(t)||null,remove(e,t){if(!Re.has(e))return;const s=Re.get(e);s.delete(t),0===s.size&&Re.delete(e)}},Pe="transitionend",Be=e=>(e&&window.CSS&&window.CSS.escape&&(e=e.replace(/#([^\s"#']+)/g,((e,t)=>`#${CSS.escape(t)}`))),e),H [...]
+const Re=new Map,Me={set(e,t,s){Re.has(e)||Re.set(e,new Map);const n=Re.get(e);n.has(t)||0===n.size?n.set(t,s):console.error(`Bootstrap doesn't allow more than one instance per element. Bound instance: ${Array.from(n.keys())[0]}.`)},get:(e,t)=>Re.has(e)&&Re.get(e).get(t)||null,remove(e,t){if(!Re.has(e))return;const s=Re.get(e);s.delete(t),0===s.size&&Re.delete(e)}},Pe="transitionend",Be=e=>(e&&window.CSS&&window.CSS.escape&&(e=e.replace(/#([^\s"#']+)/g,((e,t)=>`#${CSS.escape(t)}`))),e),H [...]
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
- */const tr=window,sr=tr.trustedTypes,nr=sr?sr.createPolicy("lit-html",{createHTML:e=>e}):void 0,ir="$lit$",or=`lit$${(Math.random()+"").slice(9)}$`,rr="?"+or,ar=`<${rr}>`,lr=document,cr=()=>lr.createComment(""),dr=e=>null===e||"object"!=typeof e&&"function"!=typeof e,ur=Array.isArray,hr="[ \t\n\f\r]",pr=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,gr=/-->/g,fr=/>/g,mr=RegExp(`>|${hr}(?:([^\\s"'>=/]+)(${hr}*=${hr}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),br=/'/g,vr=/"/g,_r=/ [...]
+ */const tr=window,sr=tr.trustedTypes,nr=sr?sr.createPolicy("lit-html",{createHTML:e=>e}):void 0,ir="$lit$",or=`lit$${(Math.random()+"").slice(9)}$`,rr="?"+or,ar=`<${rr}>`,lr=document,cr=()=>lr.createComment(""),dr=e=>null===e||"object"!=typeof e&&"function"!=typeof e,ur=Array.isArray,hr="[ \t\n\f\r]",pr=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,gr=/-->/g,fr=/>/g,mr=RegExp(`>|${hr}(?:([^\\s"'>=/]+)(${hr}*=${hr}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),br=/'/g,vr=/"/g,_r=/ [...]
<button type='button'
class='tobago-button btn btn-secondary badge' aria-label='deselect ${e}'
${s>0?" tabindex='"+String(s)+"'":""}
@click="${this.removeBadge.bind(this)}"
@focus="${this.focusEvent.bind(this)}"
- @blur="${this.blurEvent.bind(this)}"><i class='bi-x-lg'></i></button>`}removeBadge(e){const t=e.target.closest(".btn-group").dataset.tobagoValue,s=this.hiddenSelect.querySelector(`[value="${t}"]`);s.selected=!1;const n=this.selectField.querySelector(`[data-tobago-value="${t}"]`),i=n.previousElementSibling,o="SPAN"===n.nextElementSibling.tagName?n.nextElementSibling:null;i?i.querySelector("button.btn.badge").focus():o?o.querySelector("button.btn.badge").focus():(this.filterInput.dis [...]
+ @blur="${this.blurEvent.bind(this)}"><i class='bi-x-lg'></i></button>`}removeBadge(e){const t=e.target.closest(".btn-group").dataset.tobagoValue,s=this.hiddenSelect.querySelector(`[value="${t}"]`);s.selected=!1;const n=this.selectField.querySelector(`[data-tobago-value="${t}"]`),i=n.previousElementSibling,o="SPAN"===n.nextElementSibling.tagName?n.nextElementSibling:null;i?i.querySelector("button.btn.badge").focus():o?o.querySelector("button.btn.badge").focus():(this.filterInput.dis [...]
//# sourceMappingURL=tobago.js.map
diff --git a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
index 5437b51eff..d8dd560412 100644
--- a/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
+++ b/tobago-theme/tobago-theme-standard/src/main/js/tobago.js.map
@@ -1 +1 @@
-{"version":3,"file":"tobago.js","sources":["../ts/tobago-css.ts","../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlacement.j [...]
\ No newline at end of file
+{"version":3,"file":"tobago.js","sources":["../ts/tobago-css.ts","../ts/tobago-bar.ts","../../../../node_modules/@popperjs/core/lib/enums.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js","../../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js","../../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js","../../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js","../../../../node_modules/@popperjs/core/lib/utils/getBasePlacement.j [...]
\ No newline at end of file