Setting the size for an antd select component options list

user_5183578 0
Viewed 5717

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 component 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,
);

antd reactjs drop-down-menu html javascript
1 Answers

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 component 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.

user_104315740
Related