Tanjil Hossain
Tanjil Hossain

Reputation: 149

How to hide mui multiselect selected options in the select field?

I'm using MUI multiselect for selecting multiple options from dropdown. But the problem is I don't want to show the selected option in the dropdown field. How can I hide that selected options? Here is what I'm getting but I don't want to show the selected options there. enter image description here

Upvotes: 0

Views: 1198

Answers (2)

Minhaj T
Minhaj T

Reputation: 89

In this example, the renderValue prop of Material-UI's Select component is customized to dynamically render the selected options. If an option has isSelected set to true, it is hidden, otherwise, it is displayed.

<Select
  multiple
  renderValue={(selected) => (
    <div>
      {selected.map((option) => (
        option.isSelected && '' ))}
    </div>
  )}
  // ... other MultiSelect props
/>

Upvotes: -1

Mohd Faizan Ansari
Mohd Faizan Ansari

Reputation: 11

You need to remove label from the Select props. Or you need to manage renderValue prop to show empty text. It will be helpful if you provide your code snippet here.Then I can sort out your issue.

Upvotes: 1

Related Questions