diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png new file mode 100644 index 0000000000..2a3a58bf1d Binary files /dev/null and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png new file mode 100644 index 0000000000..f109cd042a Binary files /dev/null and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png differ diff --git a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx index e02a4513a9..cedb5370b0 100644 --- a/packages/plasma-b2c/src/components/Select/Select.component-test.tsx +++ b/packages/plasma-b2c/src/components/Select/Select.component-test.tsx @@ -781,6 +781,69 @@ describe('plasma-b2c: Select', () => { cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name'); }); + it('prop: renderValue', () => { + cy.viewport(400, 800); + + const Component = () => { + const [valueSingle, setValueSingle] = React.useState('paris'); + const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']); + + return ( + +
+ item.label.toUpperCase()} + /> +
+ +
+ +
+ item.label.toUpperCase()} + /> +
+
+ ); + }; + + mount(); + + cy.matchImageSnapshot(); + }); + it('basic logic', () => { cy.viewport(1000, 500); diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.tsx index be3e6f79fe..82618147cc 100644 --- a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.tsx +++ b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.tsx @@ -39,6 +39,18 @@ export const Textfield = forwardRef( ) => { const withArrowInverse = opened ? classes.arrowInverse : undefined; + const getValue = () => { + if (multiselect || !value) { + return ''; + } + + if (renderValue) { + return renderValue(valueToItemMap.get(value.toString())!); + } + + return valueToItemMap.get(value.toString())?.label || ''; + }; + const getChips = (): string[] => { if (multiselect && Array.isArray(value)) { if (value.length === 0) return []; @@ -87,7 +99,7 @@ export const Textfield = forwardRef( ref={ref} inputWrapperRef={inputWrapperRef} readOnly - value={multiselect ? undefined : valueToItemMap.get(value.toString())?.label || ''} + value={getValue()} size={size} view={view} labelPlacement={labelPlacement} diff --git a/packages/plasma-web/src/components/Select/Select.component-test.tsx b/packages/plasma-web/src/components/Select/Select.component-test.tsx index 29da179503..15ff1c2865 100644 --- a/packages/plasma-web/src/components/Select/Select.component-test.tsx +++ b/packages/plasma-web/src/components/Select/Select.component-test.tsx @@ -781,6 +781,69 @@ describe('plasma-web: Select', () => { cy.get('[id$="north_america"]').should('have.attr', 'data-name', 'test-data-name'); }); + it('prop: renderValue', () => { + cy.viewport(400, 800); + + const Component = () => { + const [valueSingle, setValueSingle] = React.useState('paris'); + const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']); + + return ( + +
+ item.label.toUpperCase()} + /> +
+ +
+ +
+ item.label.toUpperCase()} + /> +
+
+ ); + }; + + mount(); + + cy.matchImageSnapshot(); + }); + it('basic logic', () => { cy.viewport(1000, 500);