V3 Select Component changing indicator

[miyamirz]

Hey. How do i change the indicator conditionally on the select component V3. When select component is closed, i want to show the chevronDown icon and when the list is open i want to show the chevronUp icon.

Here is my code

const SelectInput = (config: SelectInputProps): JSX.Element => {
    return (
        <div>
            <Typography type="small" color="primary" className="font-medium">{config.label}</Typography>
            <Select>
                <Select.Trigger placeholder="Select Version" indicator={<ChevronDownV2 width={20} height={20} />}/>
                <Select.List >
                    <Select.Option>Material Tailwind React</Select.Option>
                    <Select.Option>Material Tailwind HTML</Select.Option>
                    <Select.Option>Material Tailwind Vue</Select.Option>
                    <Select.Option>Material Tailwind Svelte</Select.Option>
                </Select.List>
            </Select>
        </div>
    );
}

[piattda]

hi @miyamirz I have some feedback:

1. A possible solution to your problem would look like this:

const SelectInput = (config: SelectInputProps): JSX.Element => {
    const [isOpen, setIsOpen] = React.useState<boolean>(false);
    const [selectedThing, setSelectedThing] = React.useState<string>("");
    const handleOnClick = (value: string | undefined) => {
        setIsOpen(true);
        setSelectedThing(value);
    };
    return (
        <div>
            <Typography type="small" color="primary" className="font-medium">{config.label}</Typography>
            <Select onClick={handleOnClick}>
                <Select.Trigger placeholder="Select Version" indicator={isOpen ? <ChevrronUpV2 width={20} height={20} /> : <ChevronDownV2 width={20} height={20} />}/>
                <Select.List >
                    <Select.Option>Material Tailwind React</Select.Option>
                    <Select.Option>Material Tailwind HTML</Select.Option>
                    <Select.Option>Material Tailwind Vue</Select.Option>
                    <Select.Option>Material Tailwind Svelte</Select.Option>
                </Select.List>
            </Select>
        </div>
    );
}

• However, I think you might be missing something here.
• Have you referenced the example documentation?
• When I use the example it automatically handles the down / up chevron. I've never needed to explicitly set this in my personal projects.

2. Helpful hint: when you share jsx code, in between the three back tics, type jsx after the first three like this:

```jsx

it makes it easier to read jsx code outside of the repo like in my example above. Good luck and feel free to follow up with more questions!

[miyamirz]

hi @piattda Thanks for your response

I am sorry that i have not mentioned, i am using V3 material tailwind react (updated title and description now). It does not work straight out of the box in V3. I have not checked V2 until you have shared link, seems V2 does have chevron up and down states.

V3 doc link : https://www.material-tailwind.com/docs/v3/react/select

Also onClick is not working on both <Select> and <Select.Trigger>. The other alternative i tried is passing custom component to <Select.Trigger> as below, but Select does not automatically open the list in this case and it does not accept open prop.

const ControlledSelectV2 = (args: SelectV2Props) => {
  const [value, setValue] = useState(args.value || '')
  const [isOpen, setIsOpen] = useState(false)
  
  const handleClick = (value) => {
    setIsOpen(!isOpen)
  }
  
  const renderCustomSelectButton = () => () => (
    <Button
      onClick={handleClick}
    >
      Select
    </Button>
  )
  
  return (
    <Select onValueChange={handleClick}>
      <Select.Trigger as={renderCustomSelectButton()} />
      <Select.List>
        <Select.Option>Material Tailwind React</Select.Option>
        <Select.Option>Material Tailwind HTML</Select.Option>
        <Select.Option>Material Tailwind Vue</Select.Option>
        <Select.Option>Material Tailwind Svelte</Select.Option>
      </Select.List>
    </Select>
  );
}

And Thanks for the jsx tip

[piattda]

Thanks for calling out that you're using V3. Unfortunately, it's not stable and I haven't been able to get it to work with my own personal projects. Check out this comment, we've been chatting about it in the discord.

edit: I also suspect you might be using React 19 and may be encountering similar issues as the user who submitted the issue I linked above. For some reason it's not very stable with React 19.