From caa3777ef9e4d2952a03f41452430be6c072f385 Mon Sep 17 00:00:00 2001
From: Alexander Saiannyi <alexander.saiannyi@bigcommerce.com>
Date: Thu, 8 Aug 2024 09:23:40 +0200
Subject: [PATCH] fix(core): update picklist and select components to handle
 long text in placeholder

---
 .../register-customer-form/fields/picklist.tsx           | 2 +-
 core/components/ui/select/select.tsx                     | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx
index 342349677..36363e7fc 100644
--- a/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx
+++ b/core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx
@@ -66,7 +66,7 @@ export const Picklist = ({
               ? onChange
               : validateAgainstMissingValue
           }
-          placeholder={field.choosePrefix}
+          placeholder={<span className="truncate">{field.choosePrefix}</span>}
           required={field.isRequired}
           variant={isValid === false ? 'error' : undefined}
         >
diff --git a/core/components/ui/select/select.tsx b/core/components/ui/select/select.tsx
index f408c2697..046cdcdb7 100644
--- a/core/components/ui/select/select.tsx
+++ b/core/components/ui/select/select.tsx
@@ -1,7 +1,7 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { cva } from 'class-variance-authority';
 import { Check, ChevronDown, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
-import { ComponentPropsWithRef, ElementRef, forwardRef } from 'react';
+import { ComponentPropsWithRef, ElementRef, forwardRef, ReactNode } from 'react';
 
 import { cn } from '~/lib/utils';
 
@@ -24,7 +24,7 @@ type SelectTriggerType = typeof SelectPrimitive.Trigger;
 
 interface SelectProps extends ComponentPropsWithRef<SelectType> {
   variant?: 'success' | 'error';
-  placeholder?: string;
+  placeholder?: string | ReactNode;
   className?: string;
   'aria-label'?: string;
   id?: string;
@@ -40,7 +40,10 @@ const Select = forwardRef<ElementRef<SelectTriggerType>, SelectProps>(
           id={id}
           ref={ref}
         >
-          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Value
+            asChild={typeof placeholder !== 'string'}
+            placeholder={placeholder}
+          />
           <SelectPrimitive.Icon>
             <ChevronDown className="inline group-focus-visible:text-primary group-enabled:group-hover:text-primary" />
           </SelectPrimitive.Icon>