feat: improve single select with custom content

r0b1n · r0b1n · commit 4e5a07103abd · 2025-11-11T18:09:41.000+01:00
diff --git a/packages/pluggableWidgets/combobox-web/CHANGELOG.md b/packages/pluggableWidgets/combobox-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We improved behaviour of single selection with custom content.
+
 ## [2.6.2] - 2025-10-29
 
 ### Fixed
diff --git a/packages/pluggableWidgets/combobox-web/src/__tests__/SingleSelection.spec.tsx b/packages/pluggableWidgets/combobox-web/src/__tests__/SingleSelection.spec.tsx
@@ -21,6 +21,12 @@ async function getToggleButton(component: RenderResult): Promise<Element> {
 async function getInput(component: RenderResult): Promise<HTMLInputElement> {
     return (await component.findByRole("combobox")) as HTMLInputElement;
 }
+async function getVisibleValueNode(component: RenderResult): Promise<HTMLDivElement> {
+    const custom = component.container.querySelector(".widget-combobox-placeholder-custom") as HTMLDivElement;
+    const text = component.container.querySelector(".widget-combobox-placeholder-text") as HTMLDivElement;
+
+    return custom ?? text;
+}
 
 describe("Combo box (Association)", () => {
     beforeAll(() => {
@@ -108,37 +114,42 @@ describe("Combo box (Association)", () => {
     });
     it("sets option to selected item", async () => {
         const component = render(<Combobox {...defaultProps} />);
-        const input = await getInput(component);
+        const value = await getVisibleValueNode(component);
         const toggleButton = await getToggleButton(component);
         fireEvent.click(toggleButton);
         const option1 = await component.findByText("obj_222");
         fireEvent.click(option1);
-        expect(input.value).toEqual("obj_222");
+        component.rerender(<Combobox {...defaultProps} />);
+        expect(value.textContent).toEqual("obj_222");
         expect(defaultProps.attributeAssociation?.setValue).toHaveBeenCalled();
         expect(component.queryAllByRole("option")).toHaveLength(0);
         expect(defaultProps.attributeAssociation?.value).toEqual({ id: "obj_222" });
     });
     it("removes selected item", async () => {
         const component = render(<Combobox {...defaultProps} />);
 
-        const input = await getInput(component);
-        const labelText = await component.container.querySelector(
-            ".widget-combobox-placeholder-text .widget-combobox-caption-text"
-        );
         const toggleButton = await getToggleButton(component);
         fireEvent.click(toggleButton);
 
         const option1 = await component.findByText("obj_222");
         fireEvent.click(option1);
 
-        expect(input.value).toEqual("obj_222");
+        component.rerender(<Combobox {...defaultProps} />);
+
+        const value = await getVisibleValueNode(component);
+        expect(value.textContent).toEqual("obj_222");
         expect(defaultProps.attributeAssociation?.setValue).toHaveBeenCalled();
         expect(component.queryAllByRole("option")).toHaveLength(0);
         expect(defaultProps.attributeAssociation?.value).toEqual({ id: "obj_222" });
 
         const clearButton = await component.container.getElementsByClassName("widget-combobox-clear-button")[0];
         fireEvent.click(clearButton);
 
+        component.rerender(<Combobox {...defaultProps} />);
+
+        const labelText = await component.container.querySelector(
+            ".widget-combobox-placeholder-text .widget-combobox-caption-text"
+        );
         expect(labelText?.innerHTML).toEqual(defaultProps.emptyOptionText?.value);
         expect(defaultProps.attributeAssociation?.value).toEqual(undefined);
     });
diff --git a/packages/pluggableWidgets/combobox-web/src/__tests__/StaticSelection.spec.tsx b/packages/pluggableWidgets/combobox-web/src/__tests__/StaticSelection.spec.tsx
@@ -16,8 +16,16 @@ import Combobox from "../Combobox";
 async function getToggleButton(component: RenderResult): Promise<Element> {
     return component.container.querySelector(".widget-combobox-down-arrow")!;
 }
-async function getInput(component: RenderResult): Promise<HTMLInputElement> {
-    return (await component.findByRole("combobox")) as HTMLInputElement;
+
+async function getVisibleValueNode(component: RenderResult): Promise<HTMLDivElement> {
+    const custom = component.container.querySelector(".widget-combobox-placeholder-custom") as HTMLDivElement;
+    const text = component.container.querySelector(".widget-combobox-placeholder-text") as HTMLDivElement;
+
+    return custom ?? text;
+}
+
+async function findOptions(component: RenderResult): Promise<Element[]> {
+    return component.findAllByRole("option");
 }
 
 describe("Combo box (Static values)", () => {
@@ -89,8 +97,8 @@ describe("Combo box (Static values)", () => {
     });
     it("renders combobox widget with selected value", async () => {
         const component = render(<Combobox {...defaultProps} />);
-        const input = await getInput(component);
-        expect(input.value).toEqual("caption1");
+        const value = await getVisibleValueNode(component);
+        expect(value.textContent).toEqual("caption1");
     });
 
     it("toggles combobox menu on: input TOGGLE BUTTON", async () => {
@@ -107,24 +115,29 @@ describe("Combo box (Static values)", () => {
     });
     it("sets option to selected item", async () => {
         const component = render(<Combobox {...defaultProps} />);
-        const input = await getInput(component);
+        const value = await getVisibleValueNode(component);
+        expect(value.textContent).toEqual("caption1");
         const toggleButton = await getToggleButton(component);
         fireEvent.click(toggleButton);
-        const option1 = await component.findByText("caption2");
-        fireEvent.click(option1);
-        expect(input.value).toEqual("caption2");
+        const options = await findOptions(component);
+        fireEvent.click(options[1]);
+
+        component.rerender(<Combobox {...defaultProps} />);
+
+        const value2 = await getVisibleValueNode(component);
+        expect(value2.textContent).toEqual("caption2");
         expect(defaultProps.staticAttribute?.setValue).toHaveBeenCalled();
         expect(component.queryAllByRole("option")).toHaveLength(0);
         expect(defaultProps.staticAttribute?.value).toEqual("value2");
     });
     it("removes selected item", async () => {
         const component = render(<Combobox {...defaultProps} />);
-        const input = await getInput(component);
         const toggleButton = await getToggleButton(component);
         fireEvent.click(toggleButton);
-        const options = await component.findAllByText("caption1");
-        fireEvent.click(options[1]);
-        expect(input.value).toEqual("caption1");
+        const options = await findOptions(component);
+        fireEvent.click(options[0]);
+        const value = await getVisibleValueNode(component);
+        expect(value.textContent).toEqual("caption1");
         expect(component.queryAllByRole("option")).toHaveLength(0);
         expect(defaultProps.staticAttribute.value).toEqual("value1");
         const clearButton = await component.container.getElementsByClassName("widget-combobox-clear-button")[0];
diff --git a/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/SingleSelection.spec.tsx.snap b/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/SingleSelection.spec.tsx.snap
@@ -20,12 +20,13 @@ exports[`Combo box (Association) renders combobox widget 1`] = `
           aria-expanded="false"
           aria-required="true"
           autocomplete="off"
-          class="widget-combobox-input"
+          class="widget-combobox-input widget-combobox-input-item-selected"
           id="comboBox1"
           placeholder=" "
+          readonly=""
           role="combobox"
           tabindex="0"
-          value="obj_111"
+          value=""
         />
         <div
           class="widget-combobox-placeholder-text"
diff --git a/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/StaticSelection.spec.tsx.snap b/packages/pluggableWidgets/combobox-web/src/__tests__/__snapshots__/StaticSelection.spec.tsx.snap
@@ -20,12 +20,13 @@ exports[`Combo box (Static values) renders combobox widget 1`] = `
           aria-expanded="false"
           aria-required="true"
           autocomplete="off"
-          class="widget-combobox-input"
+          class="widget-combobox-input widget-combobox-input-item-selected"
           id="comboBox1"
           placeholder=" "
+          readonly=""
           role="combobox"
           tabindex="0"
-          value="caption1"
+          value=""
         />
         <div
           class="widget-combobox-placeholder-text"
diff --git a/packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx b/packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx
@@ -63,7 +63,7 @@ export function SingleSelection({
     const inputProps = getInputProps(
         {
             disabled: selector.readOnly,
-            readOnly: selector.options.filterType === "none",
+            readOnly: selector.options.filterType === "none" || !!selector.currentId,
             ref: inputRef,
             "aria-required": ariaRequired.value,
             "aria-label": !hasLabel && options.ariaLabel ? options.ariaLabel : undefined
@@ -88,7 +88,10 @@ export function SingleSelection({
                 >
                     <input
                         className={classNames("widget-combobox-input", {
-                            "widget-combobox-input-nofilter": selector.options.filterType === "none"
+                            "widget-combobox-input-nofilter":
+                                selector.options.filterType === "none" ||
+                                selector.readOnly ||
+                                (!selector.clearable && !!selector.currentId)
                         })}
                         tabIndex={tabIndex}
                         {...inputProps}
diff --git a/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftSingleSelectProps.ts b/packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftSingleSelectProps.ts
@@ -64,20 +64,21 @@ export function useDownshiftSingleSelectProps(
             stateReducer(state: UseComboboxState<string>, actionAndChanges: UseComboboxStateChangeOptions<string>) {
                 const { changes, type } = actionAndChanges;
                 switch (type) {
+                    // clear input when user toggles (closes) dropdown.
                     case useCombobox.stateChangeTypes.ToggleButtonClick:
                         return {
                             ...changes,
-                            inputValue:
-                                state.isOpen && selector.currentId ? selector.caption.get(selector.currentId) : ""
+                            inputValue: ""
                         };
 
+                    // when item is selected, downshift fills in input automatically, prevent that.
+                    case useCombobox.stateChangeTypes.FunctionSelectItem:
+                    case useCombobox.stateChangeTypes.ItemClick:
                     case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+                    case useCombobox.stateChangeTypes.InputKeyDownEnter:
                         return {
                             ...changes,
-                            inputValue:
-                                changes.inputValue === selector.caption.emptyCaption
-                                    ? ""
-                                    : selector.caption.get(selector.currentId)
+                            inputValue: ""
                         };
 
                     case useCombobox.stateChangeTypes.InputFocus:
@@ -88,15 +89,13 @@ export function useDownshiftSingleSelectProps(
                             highlightedIndex: changes.selectedItem ? -1 : this.defaultHighlightedIndex
                         };
 
+                    // clear input when user want to close the popup with escape (or it was closed programmatically)
                     case useCombobox.stateChangeTypes.InputKeyDownEscape:
                     case useCombobox.stateChangeTypes.FunctionCloseMenu:
                         return {
                             ...changes,
                             isOpen: false,
-                            inputValue:
-                                changes.selectedItem || selector.currentId
-                                    ? selector.caption.get(selector.currentId)
-                                    : ""
+                            inputValue: ""
                         };
                     case useCombobox.stateChangeTypes.InputBlur:
                         return state;
diff --git a/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss b/packages/pluggableWidgets/combobox-web/src/ui/Combobox.scss
@@ -165,14 +165,18 @@ $cb-skeleton-dark: #d2d2d2;
         flex-grow: 1;
         border: none;
         padding: 0;
-        width: 100%;
 
-        &:not(:focus) {
-            opacity: 0;
+        // when there is no filter or the input is readonly
+        // collapse input so it it not visible
+        &-nofilter,
+        &:placeholder-shown:not(:focus) {
+            max-width: 0;
         }
 
-        &-nofilter {
-            cursor: pointer;
+        // when focused but empty - allow to show only cursor
+        &:placeholder-shown:focus:not(&-nofilter) {
+            max-width: 3px;
+            margin-right: -3px;
         }
     }
 
@@ -233,11 +237,8 @@ $cb-skeleton-dark: #d2d2d2;
 
         &-text {
             color: var(--cb-text-color, var(--gray-darker, $cb-typography-color));
-            position: absolute;
             inset-inline-start: 0;
             inset-inline-end: 0;
-            top: 0;
-            bottom: 0;
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
@@ -269,7 +270,7 @@ $cb-skeleton-dark: #d2d2d2;
                 inset-inline-end: 0;
                 bottom: 0;
             }
-            &:focus:not(:placeholder-shown) + .widget-combobox-placeholder-custom {
+            &:not(:placeholder-shown) + .widget-combobox-placeholder-custom {
                 display: none;
             }
         }
@@ -294,7 +295,8 @@ $cb-skeleton-dark: #d2d2d2;
             input:placeholder-shown,
             input:not(:focus) {
                 & + .widget-combobox-placeholder-text {
-                    display: block;
+                    display: flex;
+                    align-items: center;
                 }
             }
         }

Original file line number	Diff line number	Diff line change
`@@ -165,14 +165,18 @@ $cb-skeleton-dark: #d2d2d2;`
`165`	`165`	`flex-grow: 1;`
`166`	`166`	`border: none;`
`167`	`167`	`padding: 0;`
`168`		`- width: 100%;`
`169`	`168`
`170`		`- &:not(:focus) {`
`171`		`- opacity: 0;`
	`169`	`+ // when there is no filter or the input is readonly`
	`170`	`+ // collapse input so it it not visible`
	`171`	`+ &-nofilter,`
	`172`	`+ &:placeholder-shown:not(:focus) {`
	`173`	`+ max-width: 0;`
`172`	`174`	`}`
`173`	`175`
`174`		`- &-nofilter {`
`175`		`- cursor: pointer;`
	`176`	`+ // when focused but empty - allow to show only cursor`
	`177`	`+ &:placeholder-shown:focus:not(&-nofilter) {`
	`178`	`+ max-width: 3px;`
	`179`	`+ margin-right: -3px;`
`176`	`180`	`}`
`177`	`181`	`}`
`178`	`182`
`@@ -233,11 +237,8 @@ $cb-skeleton-dark: #d2d2d2;`
`233`	`237`
`234`	`238`	`&-text {`
`235`	`239`	`color: var(--cb-text-color, var(--gray-darker, $cb-typography-color));`
`236`		`- position: absolute;`
`237`	`240`	`inset-inline-start: 0;`
`238`	`241`	`inset-inline-end: 0;`
`239`		`- top: 0;`
`240`		`- bottom: 0;`
`241`	`242`	`text-overflow: ellipsis;`
`242`	`243`	`overflow: hidden;`
`243`	`244`	`white-space: nowrap;`
`@@ -269,7 +270,7 @@ $cb-skeleton-dark: #d2d2d2;`
`269`	`270`	`inset-inline-end: 0;`
`270`	`271`	`bottom: 0;`
`271`	`272`	`}`
`272`		`- &:focus:not(:placeholder-shown) + .widget-combobox-placeholder-custom {`
	`273`	`+ &:not(:placeholder-shown) + .widget-combobox-placeholder-custom {`
`273`	`274`	`display: none;`
`274`	`275`	`}`
`275`	`276`	`}`
`@@ -294,7 +295,8 @@ $cb-skeleton-dark: #d2d2d2;`
`294`	`295`	`input:placeholder-shown,`
`295`	`296`	`input:not(:focus) {`
`296`	`297`	`& + .widget-combobox-placeholder-text {`
`297`		`- display: block;`
	`298`	`+ display: flex;`
	`299`	`+ align-items: center;`
`298`	`300`	`}`
`299`	`301`	`}`
`300`	`302`	`}`