The HTML select element uses an attribute size to determine how many rows should be visible at one time in a scrolling select element.

The code below uses size="4" to show 4 options at once.

I would like to know how to get that same functionality using the Ant Design Select ponent in a React app.

I've tried setting the attributes size and multiple but neither work. I'm open to JavaScript solutions. Any ideas?

working code:

<select size="4">
  <option id="apple" selected>Apple</option>
  <option id="orange">Orange</option>
  <option id="pineapple">Pineapple</option>
  <option id="banana">Banana</option>
</select>

The HTML select element uses an attribute size to determine how many rows should be visible at one time in a scrolling select element.

The code below uses size="4" to show 4 options at once.

I would like to know how to get that same functionality using the Ant Design Select ponent in a React app.

I've tried setting the attributes size and multiple but neither work. I'm open to JavaScript solutions. Any ideas?

working code:

<select size="4">
  <option id="apple" selected>Apple</option>
  <option id="orange">Orange</option>
  <option id="pineapple">Pineapple</option>
  <option id="banana">Banana</option>
</select>

an example code of antd :

const {  Select  } = antd;

const { Option } = Select;

ReactDOM.render(
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Search to Select"
    optionFilterProp="children"
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
    filterSort={(optionA, optionB) =>
      optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
    }
  >
    <Option value="1">Not Identified</Option>
    <Option value="2">Closed</Option>
    <Option value="3">Communicated</Option>
    <Option value="4">Identified</Option>
    <Option value="5">Resolved</Option>
    <Option value="6">Cancelled</Option>
  </Select>,
  mountNode,
);

• javascript
• html
• reactjs
• drop-down-menu
• antd

• anybody has any suggestion ? – waleedd32 Commented Mar 22, 2021 at 14:52
• 1 Looking at the documentation, the select from Ant doesnt support showing multiple items in the list up-front. The size attribute for their select is either large, middle or small. – shahkalpesh Commented Mar 22, 2021 at 15:20
• do you know any way to make it possible, using react ? – waleedd32 Commented Mar 22, 2021 at 15:37
• 1 Wouldnt make sense. If you look at the code that gets generated for Ant select, it uses div and span. – shahkalpesh Commented Mar 22, 2021 at 15:42
• anybody has any suggestion ? – waleedd32 Commented Mar 22, 2021 at 19:45

1 Answer 1

The antd Select is built on top of the rc-select package instead of the browser's own select so just passing select attributes won't work.

The ponent is designed with one section that shows the current selected items and allows the user to type and another section that shows the list of options. It sounds like you want the list of options to be the only section? And users just select or deselect by scrolling the list.

I'm only part way there but hopefully this helps.

• mode="multiple" allows for multiple selections
• open={true} causes the options list to be shown at all times. Note that this is considered an overlay and will cover other contents, so you'll need to fix some styling.
• listHeight is the closest to what you are asking for, but this takes a number of pixels instead of a number of rows. Each option is 32px at the standard size, so you would want 4 * 32 or 128.

import "antd/dist/antd.css";
import { Select } from "antd";
const { Option } = Select;

export default () => (
  <Select
    style={{ width: 200 }}
    placeholder="Hide Me"
    mode="multiple"
    open={true}
    listHeight={128}
  >
    <Option value="1">Not Identified</Option>
    <Option value="2">Closed</Option>
    <Option value="3">Communicated</Option>
    <Option value="4">Identified</Option>
    <Option value="5">Resolved</Option>
    <Option value="6">Cancelled</Option>
  </Select>
);

I haven't figured out how to hide the top section with the current selections. You could do it with CSS but there should be a better way.