Antd dropdown hides options when a certain amount of options is reached

Question

So i have an antd select

<Select >
    <Option value="option1">Option 1</Option>
    <Option value="option2">Option 2</Option>
    <Option value="option3">Option 3</Option>
    <Option value="option4">Option 4</Option>
    <Option value="option5">Option 5</Option>
    <Option value="option6">Option 6</Option>
    <Option value="option7">Option 7</Option>
    <Option value="option8">Option 8</Option>
    <Option value="option9">Option 9</Option>
    <Option value="option10">Option 10</Option>
</Select>

Works fine

when i add another option scrollbar shows and options become hidden

<Select >
    <Option value="option1">Option 1</Option>
    <Option value="option2">Option 2</Option>
    <Option value="option3">Option 3</Option>
    <Option value="option4">Option 4</Option>
    <Option value="option5">Option 5</Option>
    <Option value="option6">Option 6</Option>
    <Option value="option7">Option 7</Option>
    <Option value="option8">Option 8</Option>
    <Option value="option9">Option 9</Option>
    <Option value="option10">Option 10</Option>
    <Option value="option11">Option 11</Option>
</Select>

I have tried setting maxHeight but not sure what would cause this?

Answer 1

You can change dropdownStyle props of the Select component. Please see the code below

<Select dropdownStyle={{width: 'max-content'}}>
    <Option value="option1">Option 1</Option>
    <Option value="option2">Option 2</Option>
    <Option value="option3">Option 3</Option>
    <Option value="option4">Option 4</Option>
    <Option value="option5">Option 5</Option>
    <Option value="option6">Option 6</Option>
    <Option value="option7">Option 7</Option>
    <Option value="option8">Option 8</Option>
    <Option value="option9">Option 9</Option>
    <Option value="option10">Option 10</Option>
    <Option value="option11">Option 11</Option>
</Select>