How to use Material Tailwind to implement multi-select drop-down menu in React

Question

I'm trying to build a multi-select dropdown menu using Tailwind Material Select and Option components.

However, whenever I try to pass an array as a value to the Select's value property, I get the following error:

Invalid property value, of type array, provided to MaterialTailwind.Select, expected type is ;string

I don’t want to use react-select because my overall design uses Tailwind Material.

If anyone has an idea, please tell me how to implement a multi-select dropdown menu with Tailwind Material.

<Select
  className='md:w-72'
  size='lg'
  label='Change Type'
  multiple
  value={selectedOptions}>
  {options.map((o) => {
    return <Option value={o.value}>{o.value}</Option>;
  })}
</Select>

Thank you!

Answer 1

It looks like the MaterialTailwind.Select component you are using expects the value attribute as a string for the radio selection. Since you want to implement multi-selection functionality using Tailwind Material, you may need to handle it differently.

One way is to manage the selected options as an array of selected values ​​in the component's state. Then, when rendering options, you can conditionally apply the selected attribute to matching options based on the values ​​in the selectedOptions array.

Here are examples of how you might achieve this:

import React, { useState } from 'react';
import { Select, Option } from '@material-tailwind/react';

const MyMultiSelect = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);
  
  const options = [
    { value: '选项1' },
    { value: '选项2' },
    { value: '选项3' },
    // ... 其他选项
  ];

  const handleOptionToggle = (optionValue) => {
    if (selectedOptions.includes(optionValue)) {
      setSelectedOptions(selectedOptions.filter(val => val !== optionValue));
    } else {
      setSelectedOptions([...selectedOptions, optionValue]);
    }
  };

  return (
    <Select
      className='md:w-72'
      size='lg'
      label='更改类型'
      multiple
    >
      {options.map((o) => (
        <Option
          key={o.value}
          value={o.value}
          selected={selectedOptions.includes(o.value)}
          onClick={() => handleOptionToggle(o.value)}
        >
          {o.value}
        </Option>
      ))}
    </Select>
  );
};

export default MyMultiSelect;

In this example, the handleOptionToggle function is used to toggle the selected option in the status array. The selected property of each Option component is set based on whether the option value exists in the selectedOptions array.

Please note that this approach may not exactly match the exact behavior and style of the MaterialTailwind.Select component, but it provides a way to implement multi-select functionality using the available components. You may need to adjust the style and behavior to suit your project design and requirements.