From f55986e5d70723d40ac8ca3acf3118709bcd393f Mon Sep 17 00:00:00 2001
From: emrberk <emreberk5699@gmail.com>
Date: Thu, 9 Nov 2023 18:03:18 +0300
Subject: [PATCH] add permanent placeholder for checkable select field

---
 packages/ui/src/Select/CheckableSelectField.module.scss | 4 ++++
 packages/ui/src/Select/CheckableSelectField.tsx         | 9 ++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/Select/CheckableSelectField.module.scss b/packages/ui/src/Select/CheckableSelectField.module.scss
index 93a7b0d84..1f76512c7 100644
--- a/packages/ui/src/Select/CheckableSelectField.module.scss
+++ b/packages/ui/src/Select/CheckableSelectField.module.scss
@@ -8,6 +8,10 @@
 .opener {
   input {
     cursor: pointer;
+
+    &.withPermanentPlaceholder {
+      color: c.$colorTextSecondary;
+    }
   }
 }
 
diff --git a/packages/ui/src/Select/CheckableSelectField.tsx b/packages/ui/src/Select/CheckableSelectField.tsx
index 79b2a6161..c24c7b0e9 100644
--- a/packages/ui/src/Select/CheckableSelectField.tsx
+++ b/packages/ui/src/Select/CheckableSelectField.tsx
@@ -21,6 +21,7 @@ export type CheckableSelectFieldCoreStaticProps<V> = {
   onChange: (newValue: V[]) => void
   allSelectedLabel?: string
   noneSelectedLabel?: string
+  permanentPlaceholder?: string
 }
 
 export type CheckableSelectFieldExtraProps<V> = {
@@ -73,6 +74,7 @@ export const CheckableSelectField = <V extends string | number = number>(props:
     'data-test': dataTest,
     allSelectedLabel = 'All selected',
     noneSelectedLabel = 'None selected',
+    permanentPlaceholder,
     noOptionsMessage = 'No options',
     id: rootId,
   } = props
@@ -99,6 +101,9 @@ export const CheckableSelectField = <V extends string | number = number>(props:
   }, [options, searchValue])
 
   const getValueLabel = () => {
+    if (permanentPlaceholder) {
+      return permanentPlaceholder
+    }
     if (value.length === 0) {
       return noneSelectedLabel
     }
@@ -123,7 +128,9 @@ export const CheckableSelectField = <V extends string | number = number>(props:
         disabled={disabled}
         showAriaLabel={showAriaLabel}
         helperText={helperText}
-        className={cls(className, styles.opener)}
+        className={cls(className, styles.opener, {
+          [styles.withPermanentPlaceholder]: !!permanentPlaceholder,
+        })}
         error={error}
         onBlur={onBlur}
         readOnly