Issue with Select Component: How to Remove Default Arrows? 🤔

[pavelbe]

Hello, friends!

I'm facing an issue with the Select component from the Shadcn/UI library. I want to remove the default arrows from the dropdown list, but I can't find a way to do it.

I have attached a screenshot where you can see that the arrows are still displayed despite my attempts to hide them.

Perhaps someone has encountered a similar issue before and knows how to solve it? I would appreciate any help and advice!

Thank you!

[mukhammadxuja]

You can do it with props. In this example I use select.

<SelectTrigger isArrow={false}>
  {children}
</SelectTrigger>

const SelectTrigger = React.forwardRef(
   ({ className, children, isArrow = true, ...props }, ref) => (
    <SelectPrimitive.Trigger
      ref={ref}
      className={cn(
        'some select trigger class',
        className
      )}
      {...props}
    >
      {children}
      {isArrow && (
        <SelectPrimitive.Icon asChild>
          <ChevronDown className="h-4 w-4 opacity-50" />
        </SelectPrimitive.Icon>
      )}
    </SelectPrimitive.Trigger>
  )
);
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

[lucasfelixc]

Hi @pavelbe, can you share with us the source code of your Select component? You can follow the path that @mukhammadxuja shared with us, but I'm thinking there is a problem with your Select component because there is a Select in your screenshot that has two icons, maybe you are using icons wrong. Place your icon inside the SelectTrigger component.

[Benrobo]

You could simply create a custom type and join the custom type with the type presents within the SelectTrigger props. here's how I did mine:

// custom prop type
type CustomSelectTriggerProps = {
  rightIcon?: React.ReactNode;
};

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
    CustomSelectTriggerProps // join the type using '&'
>(({ className, children, rightIcon = null, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      {rightIcon ? rightIcon : <CaretSortIcon className="h-4 w-4 opacity-50" />}
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

[otabekoff]

I'd to edit the component code by adding hideIcon prop to hide icon. Now, when I provide it, then the icon will be hidden, otherwise, the default icon will be shown. I customized it a bit and then been able to send custom from parent.