score:9
Accepted answer
use the suffixicon
prop on the select
component.
https://codesandbox.io/s/select-with-search-field-ant-design-demo-k217c?file=/index.js:0-679
like so:
import react from 'react'
import reactdom from 'react-dom'
import 'antd/dist/antd.css'
import './index.css'
import { select } from 'antd'
import { downcircletwotone } from '@ant-design/icons'
const { option } = select
reactdom.render(
<select
suffixicon={<downcircletwotone />}
showsearch
style={{ width: 200 }}
placeholder="select a person"
optionfilterprop="children"
filteroption={(input, option) =>
option.children.tolowercase().indexof(input.tolowercase()) >= 0
}
>
<option value="jack">jack</option>
<option value="lucy">lucy</option>
<option value="tom">tom</option>
</select>,
document.getelementbyid('container')
)
Source: stackoverflow.com
Related Query
- Changing the arrow icon of "Select"
- How to display an icon next to a Select element without obscuring the arrow
- Change color of Select component's border and arrow icon Material UI
- How do I change the dropdown icon in material-ui select field?
- How can I style the arrow of react select component?
- material-table How do I select a row changing the background color upon selection
- A component is changing the uncontrolled value state of Select to be controlled
- Why arrow key navigation doesn't work (or focus) in Dropdown in React Select when the option is modified?
- I want the arrow icon to flip up and down every time the state changes.and I want to animate it
- Changing the backgroundColor of react mateial-ui Select MuiList
- Change the icon by changing the API data
- How can I get the Icon to be clickable and let it allow changing the value inside Input?
- Changing the arrow/icon colour material ui select
- React Bootstrap: How can I change the icon of Dropdown.Toggle from the arrow icon to some other icons from React Icon?
- Component is not rendering on changing the select
- Changing BaseWeb's Select TriangleDownIcon to another BaseWeb Icon
- rc calendar when I select the date in the calendar its not changing in the textbox
- MUI: A component is changing the uncontrolled value state of Select to be controlled
- How to customize the select arrow in a "Multiselect" component using "multiselect-react-dropdown" package?
- React: changing icon on mouseEnter using state. Icon stuck on "hover" state if I move the mouse too fast
- How do I fix "Expected to return a value at the end of arrow function" warning?
- How to allow input type=file to select the same file in react component
- Arrow functions and the use of parentheses () or {} or ({})
- Material UI Select Component- A component is changing a controlled input of type text to be uncontrolled
- Figuring out how to mock the window size changing for a react component test
- How to enlarge the SVG icon in material-ui iconButtons?
- Eslint Error - Unexpected block statement surrounding arrow body; move the returned value immediately after the =>
- Changing the order of Grid Item stacking in material-ui
- Changing the document title in React?
- Material-UI changing the color of inputs floating label
More Query from same tag
- CSS Styling Pie Chart / Doughnut chart
- How to customize Material-UI StepConnector
- Why React app doesn't keep nodejs server login session?
- ReactJS- Execute function while sending to child Component
- Issue with useState and React.FC in typescript
- React collapse row onClick
- React login using context API with private route
- Creating a ContextProvider for a Form Component in ReactJS
- Getting json object data with react
- Background Image won't show in React component
- REACT TypeError: Cannot read property 'value' of undefined
- React Js + Express Route
- why is componentWillUnmount not firing in the React root component when application is closed
- How to test a method which is resolving a promise and then changing state in React?
- Login Form React JS With Custom Hook
- Redirect to login only if user is not authenticated react
- Bind react component to part of redux state
- Different order of objects while looping individually and printing all at once
- Clear state on handleChange function
- Customizing styles on Slider Material-UI (React)
- When creating a menu in a column of mui-datatable in react, it only returns the data of the last element of the list
- Is there example there extend react-leaflet Map component to use leaflet.contextmenu?
- Avoid component re-rendering when passing props to child component
- Updating state in reducer using variables
- How to show the specified table row data based on the filter option in react js
- Dynamic atom keys in Recoil
- Is there a way to debug react interactively
- How to trigger selectchange event on select?
- How to target a single map()'d element in React?
- Performance when dealing with large matrices in React