CODEWITHSUNDEEP
reactjstypescriptreact-select
LCIII
LCIII

Reputation: 3626

How to get rid of input box on react-select dropdown

What I want: A horizontal list of tabs at the top of my app with a little elipsis at the right end which, when clicked, displays a dropdown list display of the tabs. So if the tabs are 50 items long, the user can just click the dropdown. Clicking an item in the dropdown would have the equivalent behavior of clicking that tab.

What I have that works: Tabs are homebrewed and work fine. Elipsis displays the dropdown list fine (I am using React-Select) and the selection functionality all works.

The problem: When the user clicks the elipsis they see the selectable list of options, but between the elipsis and the selectable list is the menu input. I don't want that menu input and I want it gone completely from the screen.

I tried fudging around with the components api for React-Select, but I don't even know where to start because there isn't any example code that I've found and I don't know how to decipher the documentation on the site.

What I got:

  <Select
    options={tabList}
    menuIsOpen={openMenu}
    defaultValue={blankOption}
    closeMenuOnSelect
    isSearchable={false}
    onChange={option => handleChange(option)}
  />

Upvotes: 0

Views: 2311

Answers (2)

Michelangelo Machado
Michelangelo Machado

Reputation: 149

<Select
    options={options}
    styles={{
        container: (base) => ({
            ...base,
            display: 'inline-block',
        }),
        control: (base) => ({
            ...base,
            width: '40px',
        }),
        valueContainer: (base) => {
            return {
                ...base,
                display: 'none',
            }
        },
        menu: (base) => {
            return {
                ...base,
                width: '190px',
                right: 0
            }
        },
    }}
/>

Upvotes: 0

Andrii Golubenko
Andrii Golubenko

Reputation: 5179

You didn't provide a code and example, so I suppose that you just want to remove an input that allows to search options in the Select component. For this, you just need to add isSearchable prop with false value.

<Select
  isSearchable={false}
  ...
/>

Here is an example

Upvotes: 2

Related Questions