fix: <SelectInput> styles when isMulti prop is used together with…

… `controlShouldRenderValue` (#2490)

* fix: proper SelectInput styles when isMulti used together with controlShouldRenderValue

* fix: add controlShouldRenderValue to default props

.changeset/fast-ducks-run.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/select-input': patch
+'@commercetools-uikit/select-utils': patch
+---
+
+Fix `<SelectInput>` styles when `isMulti` prop is used together with `controlShouldRenderValue`

packages/components/inputs/select-input/src/select-input.tsx

@@ -322,10 +322,11 @@ export type TSelectInputProps = {
 
 const defaultProps: Pick<
   TSelectInputProps,
-  'maxMenuHeight' | 'menuPortalZIndex'
+  'maxMenuHeight' | 'menuPortalZIndex' | 'controlShouldRenderValue'
 > = {
   maxMenuHeight: 220,
   menuPortalZIndex: 1,
+  controlShouldRenderValue: true,
 };
 
 const SelectInput = (props: TSelectInputProps) => {
@@ -402,6 +403,7 @@ const SelectInput = (props: TSelectInputProps) => {
               iconLeft: props.iconLeft,
               isMulti: props.isMulti,
               hasValue: !isEmpty(selectedOptions),
+              controlShouldRenderValue: props.controlShouldRenderValue,
               isNewTheme,
             }) as ReactSelectProps['styles']
           }

packages/components/inputs/select-utils/src/create-select-styles.ts

@@ -21,6 +21,7 @@ type TProps = {
   iconLeft?: ReactNode;
   isMulti?: boolean;
   hasValue?: boolean;
+  controlShouldRenderValue?: boolean;
 };
 
 type TBase = {
@@ -252,7 +253,8 @@ const valueContainerStyles = (props: TProps) => (base: TBase) => {
     // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
     // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
     display:
-      (props.iconLeft && !props.isMulti) || (props.isMulti && props.hasValue)
+      (props.iconLeft && !props.isMulti) ||
+      (props.isMulti && props.hasValue && props.controlShouldRenderValue)
         ? 'flex'
         : 'grid',
     fill: