fix(core): update picklist and select components to handle long text …

…in placeholder
bigcommerce · Aug 8, 2024 · caa3777 · caa3777
1 parent 1ef848c
commit caa3777
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/.../(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx b/.../(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
@@ -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>