Adding a prefix icon for the Antd Cascader - html

Question

I am working with antd cascader and want to add a prefix icon in the cascader. Although there is a provision for a suffix icon in the cascader I could not find a way to add a prefix icon.
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
function onChange(value) {
console.log(value);
}
ReactDOM.render(
<Cascader options={options} onChange={onChange} placeholder="Please select" />,
mountNode,
);
Currently, the cascader looks as :
I want it to look something similar to:
where the globe is a prefix icon. How could I add a prefix icon?

Answer 1

You can create a custom cascader with prefix/suffix icons of your choice if you use a wrapper div with relative positioning and have the <Icon/> child with absolute positioning and higher z-index than the Cascader/> (to go on top of it).
Check the example here: https://codesandbox.io/s/antd-cascader-ynqpk
const CustomCascader = ({ options, width = 300 }) => {
const [open, setOpen] = useState(false);
const onChange = value => {
console.log(value);
};
const filter = (inputValue, path) => {
return path.some(
option =>
option.display_name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
);
};
const onPopupVisibleChange = visible => {
setOpen(visible);
};
return (
<div style={{ position: "relative", width }}>
<Icon
type={open ? "up" : "down"}
style={{ position: "absolute", right: 8, top: 10, zIndex: 5 }}
/>
<Icon
type="global"
style={{ position: "absolute", left: 5, top: 10, zIndex: 5 }}
/>
<Cascader
style={{ paddingLeft: 0, width }}
suffixIcon={<div />}
expandTrigger="hover"
fieldNames={{ label: "name", value: "code", children: "items" }}
options={options}
onChange={onChange}
showSearch={{ filter }}
placeholder="Please select"
onPopupVisibleChange={onPopupVisibleChange}
popupVisible={open}
/>
</div>
);
};
ReactDOM.render(
<div>
<CustomCascader options={options} />
<CustomCascader options={options} />
<CustomCascader options={options} />
</div>,
document.getElementById("container")
);