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 2026/04/17 19:10:24 UTC
(myfaces-tobago) branch main updated: fix(selectOne/ManyList): styling
This is an automated email from the ASF dual-hosted git repository.
henningn pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/main by this push:
new f03016b8a6 fix(selectOne/ManyList): styling
f03016b8a6 is described below
commit f03016b8a6867ca492d4e2d1851b5d6faa5ae02e
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Apr 17 13:22:38 2026 +0200
fix(selectOne/ManyList): styling
Fix styling, adjust tests.
Issue: TOBAGO-2512
---
.../renderkit/renderer/SelectManyListRenderer.java | 10 +++++-----
.../renderkit/renderer/SelectOneListRenderer.java | 10 +++++-----
.../renderer/selectManyList/selectManyListAjax.html | 2 +-
.../renderer/selectOneList/selectOneListAjax.html | 2 +-
.../900-test/selectManyList/SelectManyList.xhtml | 10 ++++++++++
.../content/900-test/selectOneList/SelectOneList.xhtml | 9 +++++++++
.../900-test/selectManyList/SelectManyList.test.ts | 17 +++++++++++++++++
.../900-test/selectOneList/SelectOneList.test.ts | 17 +++++++++++++++++
8 files changed, 65 insertions(+), 12 deletions(-)
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 225b684fda..b275f5b325 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
@@ -19,10 +19,6 @@
package org.apache.myfaces.tobago.internal.renderkit.renderer;
-import jakarta.faces.component.UIComponent;
-import jakarta.faces.context.FacesContext;
-import jakarta.faces.model.SelectItem;
-import jakarta.faces.model.SelectItemGroup;
import org.apache.myfaces.tobago.component.Facets;
import org.apache.myfaces.tobago.context.Markup;
import org.apache.myfaces.tobago.internal.component.AbstractUISelectItemsFiltered;
@@ -43,6 +39,10 @@
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
+import jakarta.faces.component.UIComponent;
+import jakarta.faces.context.FacesContext;
+import jakarta.faces.model.SelectItem;
+import jakarta.faces.model.SelectItemGroup;
import java.io.IOException;
import java.lang.invoke.MethodHandles;
import java.util.ArrayList;
@@ -184,7 +184,7 @@ private void encodeSelectField(
!expanded && markup.contains(Markup.LARGE) ? BootstrapClass.FORM_SELECT_LG : null,
!expanded && markup.contains(Markup.SMALL) ? BootstrapClass.FORM_SELECT_SM : null,
TobagoClass.SELECT__FIELD,
- expanded ? BootstrapClass.LIST_GROUP_ITEM : BootstrapClass.DROPDOWN_TOGGLE,
+ expanded ? BootstrapClass.LIST_GROUP_ITEM : null,
expanded ? null : BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
component.getCustomClass());
writer.writeAttribute(HtmlAttributes.TITLE, title, true);
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 bd2f83a867..30023abfa4 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
@@ -19,10 +19,6 @@
package org.apache.myfaces.tobago.internal.renderkit.renderer;
-import jakarta.faces.component.UIComponent;
-import jakarta.faces.context.FacesContext;
-import jakarta.faces.model.SelectItem;
-import jakarta.faces.model.SelectItemGroup;
import org.apache.myfaces.tobago.component.Facets;
import org.apache.myfaces.tobago.context.Markup;
import org.apache.myfaces.tobago.internal.component.AbstractUISelectItemsFiltered;
@@ -42,6 +38,10 @@
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
+import jakarta.faces.component.UIComponent;
+import jakarta.faces.context.FacesContext;
+import jakarta.faces.model.SelectItem;
+import jakarta.faces.model.SelectItemGroup;
import java.io.IOException;
import java.lang.invoke.MethodHandles;
import java.util.ArrayList;
@@ -180,7 +180,7 @@ private void encodeSelectField(
!expanded && markup.contains(Markup.LARGE) ? BootstrapClass.FORM_SELECT_LG : null,
!expanded && markup.contains(Markup.SMALL) ? BootstrapClass.FORM_SELECT_SM : null,
TobagoClass.SELECT__FIELD,
- expanded ? BootstrapClass.LIST_GROUP_ITEM : BootstrapClass.DROPDOWN_TOGGLE,
+ expanded ? BootstrapClass.LIST_GROUP_ITEM : null,
expanded ? null : BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
component.getCustomClass());
writer.writeAttribute(HtmlAttributes.TITLE, title, true);
diff --git a/tobago-core/src/test/resources/renderer/selectManyList/selectManyListAjax.html b/tobago-core/src/test/resources/renderer/selectManyList/selectManyListAjax.html
index d6511d969b..29fb572aba 100644
--- a/tobago-core/src/test/resources/renderer/selectManyList/selectManyListAjax.html
+++ b/tobago-core/src/test/resources/renderer/selectManyList/selectManyListAjax.html
@@ -20,7 +20,7 @@
<option value='Stratocaster'>Stratocaster</option>
<option value='Telecaster'>Telecaster</option></select>
<div class='dropdown'>
-<div id='id::selectField' 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' aria-expanded='false'>
<div class='tobago-badges'></div>
<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' data-tobago-for='id'>
diff --git a/tobago-core/src/test/resources/renderer/selectOneList/selectOneListAjax.html b/tobago-core/src/test/resources/renderer/selectOneList/selectOneListAjax.html
index 97f8cd8e0c..69a3d64605 100644
--- a/tobago-core/src/test/resources/renderer/selectOneList/selectOneListAjax.html
+++ b/tobago-core/src/test/resources/renderer/selectOneList/selectOneListAjax.html
@@ -20,7 +20,7 @@
<option value='Stratocaster'>Stratocaster</option>
<option value='Telecaster'>Telecaster</option></select>
<div class='dropdown'>
-<div id='id::selectField' 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' aria-expanded='false'>
<i></i>
<span></span>
<input type='search' id='id::filter' class='tobago-filter form-control' autocomplete='off' readonly='readonly'></div>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectManyList/SelectManyList.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectManyList/SelectManyList.xhtml
index 88b57d2bb2..4a72481008 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectManyList/SelectManyList.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectManyList/SelectManyList.xhtml
@@ -19,6 +19,7 @@
<ui:composition template="/main.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:f="jakarta.faces.core"
xmlns:tc="http://myfaces.apache.org/tobago/component"
xmlns:ui="jakarta.faces.facelets">
@@ -55,4 +56,13 @@
var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
</tc:selectManyList>
</tc:section>
+
+ <tc:section label="Input group">
+ <tc:selectManyList id="inputGroup" label="Input Group">
+ <f:facet name="before">before</f:facet>
+ <f:facet name="after">after</f:facet>
+ <tc:selectItem itemValue="one"/>
+ <tc:selectItem itemValue="two"/>
+ </tc:selectManyList>
+ </tc:section>
</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectOneList/SelectOneList.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectOneList/SelectOneList.xhtml
index 0307bc624f..54a468d547 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectOneList/SelectOneList.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/900-test/selectOneList/SelectOneList.xhtml
@@ -53,4 +53,13 @@
var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
</tc:selectOneList>
</tc:section>
+
+ <tc:section label="Input group">
+ <tc:selectOneList id="inputGroup" label="Input Group" value="#{selectOneListController.selectedPlanet}">
+ <f:facet name="before">before</f:facet>
+ <f:facet name="after">after</f:facet>
+ <tc:selectItems value="#{selectOneListController.planets}"
+ var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
+ </tc:selectOneList>
+ </tc:section>
</ui:composition>
diff --git a/tobago-example/tobago-example-demo/src/test/typescript/content/900-test/selectManyList/SelectManyList.test.ts b/tobago-example/tobago-example-demo/src/test/typescript/content/900-test/selectManyList/SelectManyList.test.ts
index 306f256e17..fa5be00e14 100644
--- a/tobago-example/tobago-example-demo/src/test/typescript/content/900-test/selectManyList/SelectManyList.test.ts
+++ b/tobago-example/tobago-example-demo/src/test/typescript/content/900-test/selectManyList/SelectManyList.test.ts
@@ -162,4 +162,21 @@ test.describe("900-test/selectManyList/SelectManyList.xhtml", () => {
await expect(plutoRowFn).toContainClass("d-none");
await expect(noEntriesRowFn).not.toContainClass("d-none");
});
+
+ test("Corner radius of select field must be '0px'", async ({page}) => {
+ const selectField = page.locator("[id='page:mainForm:inputGroup::selectField']");
+ const options = page.locator(".tobago-options[data-tobago-for='page:mainForm:inputGroup']");
+
+ await expect(selectField).toHaveCSS("border-top-left-radius", "0px");
+ await expect(selectField).toHaveCSS("border-bottom-left-radius", "0px");
+ await expect(selectField).toHaveCSS("border-top-right-radius", "0px");
+ await expect(selectField).toHaveCSS("border-bottom-right-radius", "0px");
+ await expect(options).not.toBeVisible();
+ await selectField.click();
+ await expect(options).toBeVisible();
+ await expect(selectField).toHaveCSS("border-top-left-radius", "0px");
+ await expect(selectField).toHaveCSS("border-bottom-left-radius", "0px");
+ await expect(selectField).toHaveCSS("border-top-right-radius", "0px");
+ await expect(selectField).toHaveCSS("border-bottom-right-radius", "0px");
+ });
});
diff --git a/tobago-example/tobago-example-demo/src/test/typescript/content/900-test/selectOneList/SelectOneList.test.ts b/tobago-example/tobago-example-demo/src/test/typescript/content/900-test/selectOneList/SelectOneList.test.ts
index b5a992ae7e..f639bdb5eb 100644
--- a/tobago-example/tobago-example-demo/src/test/typescript/content/900-test/selectOneList/SelectOneList.test.ts
+++ b/tobago-example/tobago-example-demo/src/test/typescript/content/900-test/selectOneList/SelectOneList.test.ts
@@ -148,4 +148,21 @@ test.describe("900-test/selectOneList/SelectOneList.xhtml", () => {
await expect(plutoRowFn).toContainClass("d-none");
await expect(noEntriesRowFn).not.toContainClass("d-none");
});
+
+ test("Corner radius of select field must be '0px'", async ({page}) => {
+ const selectField = page.locator("[id='page:mainForm:inputGroup::selectField']");
+ const options = page.locator(".tobago-options[data-tobago-for='page:mainForm:inputGroup']");
+
+ await expect(selectField).toHaveCSS("border-top-left-radius", "0px");
+ await expect(selectField).toHaveCSS("border-bottom-left-radius", "0px");
+ await expect(selectField).toHaveCSS("border-top-right-radius", "0px");
+ await expect(selectField).toHaveCSS("border-bottom-right-radius", "0px");
+ await expect(options).not.toBeVisible();
+ await selectField.click();
+ await expect(options).toBeVisible();
+ await expect(selectField).toHaveCSS("border-top-left-radius", "0px");
+ await expect(selectField).toHaveCSS("border-bottom-left-radius", "0px");
+ await expect(selectField).toHaveCSS("border-top-right-radius", "0px");
+ await expect(selectField).toHaveCSS("border-bottom-right-radius", "0px");
+ });
});