当我单击其中一项（输入元素）时，如何阻止 Select 组件关闭 - 反应 antd

Question

I am using antd(3.23.4) . I have a Select component and I want to avoid it to close when I click one of its Option(Input element). Had been successful avoiding to close it however, cannot focus on the Input element when I clicked it. I think this is because I wrapped it on a div and used a preventDefault() on the div - which stops immediately when I clicked the Input element. I've searched some of the issues on the antd's github but no luck. Here is a sample of my code:

            <Select
              dropdownRender={menu => (
                <React.Fragment>
                   {menu}      
                   <div onMouseDown={e => e.preventDefault()}>
                       <Input type="number" key="others" addonBefore="Others: " /> 
                   </div>
                </React.Fragment>
                                        
                  )} >
                    <Option key="bar" value="bar">
                        bar
                    </Option>
                </Select>

The problem here is that I can't click/focus the input. So that I can type in it.

Need help. Please advise. Thank you in advance for those who will answer:)

Answer 1

We have a size="" attribute in select component(tag) in html Select Attributes . This make sure how many options inside the selectbox is visible at a time so u may do it like this....

<select
            id="select"
            name="catagory"
            onChange={(e) => handleChange(e)}
            onClick={() => addSize()}
          >
            *.....Your Options....*
</select>



const addSize = () => {
  const selectBox = document.getElementById("select");
  selectBox.addEventListener("click", selectBox.setAttribute("size", 10));
};