From 26830d8ed0f0bccad6ceae0891e4c2491328c685 Mon Sep 17 00:00:00 2001
From: Kacper Krzywiec <49066275+kark@users.noreply.github.com>
Date: Wed, 12 Apr 2023 13:51:09 +0200
Subject: [PATCH] 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                                | 6 ++++++
 .../components/inputs/select-input/src/select-input.tsx     | 4 +++-
 .../inputs/select-utils/src/create-select-styles.ts         | 4 +++-
 3 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fast-ducks-run.md

diff --git a/.changeset/fast-ducks-run.md b/.changeset/fast-ducks-run.md
new file mode 100644
index 0000000000..37698e042a
--- /dev/null
+++ b/.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`
diff --git a/packages/components/inputs/select-input/src/select-input.tsx b/packages/components/inputs/select-input/src/select-input.tsx
index ba5fee056d..a1f1c7c750 100644
--- a/packages/components/inputs/select-input/src/select-input.tsx
+++ b/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']
           }
diff --git a/packages/components/inputs/select-utils/src/create-select-styles.ts b/packages/components/inputs/select-utils/src/create-select-styles.ts
index 3a0e898186..9aab6debd7 100644
--- a/packages/components/inputs/select-utils/src/create-select-styles.ts
+++ b/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: