When ANTD’s SELECT is in multi-select mode, the input box disables the search function and the input is prohibited

Background:

1. When doing projects, often use the “multi-selected SELECT component” in ANTD;





2. ANTD KPI document:
showSearchMake radio mode searchable, meaning that the search function can be set in radio mode, and when showSearch: false, the search function is still available in multi-select mode.





3. As a result, the multi-select mode input box will get the focus cursor to appear, and content can also be entered. Since the value of the option is the value of code instead of label, relevant content will not be found in the search of input content.

<Select
 mode={'multiple'}
/>

Solution:

1. For the select component of antd 3.x: do a DOM operation to find the input and add a read-only property

js

// AnTD dropdown multi-select mode does not support disabling input search function, Const AuctionTimesCode = document.querySelector('#auctionTimesCode #auctionTimesCode'); auctionTimesCode && auctionTimesCode.setAttribute('readonly', 'true');

css

.ant-select-selection--multiple {
  cursor: pointer;
}

Select: showSearch:false for antd 4.x 📣 = “”;

<Select
 mode={'multiple'}
 showSearch={false}
/>

Conclusion:

In order to solve the problem of ANTD3. X, I checked a lot of information before. It is true that the SELECT component in ANTD3 does not disable the configuration of the search function in multi-select mode.