I am using material UI for my project and I have an UI like this
As you can see, it has a select and when it was opened, I can type to search the campaign that match with what I want and this is how i have done:
<FormControl className={classes.formControl} color="secondary">
<Select
value={campaign}
displayEmpty
className={classes.selectEmpty}
onChange={(e) => {
if (e.target.value === '') {
e.preventDefault();
return false;
} else setCampaign(e.target.value);
}}
onClose={(e) => {
if (e.target.value === '') {
e.preventDefault();
return false;
}
}}
inputProps=aria-label
>
<MenuItem value="" className={classes.campaignSeachBox}>
<div className={classes.campaignSeachBoxHeader}>
<img
src={darkSignalTowerIcon}
className={classes.customedIcon}
alt=""
/>
<span className={classes.customedText}>New Campaign</span>
</div>
<div className={classes.campaignSeachBoxInputContainer}>
<SearchIcon fontSize="small" color="disabled" />
<input
type="text"
className={classes.campaignSeachBoxInput}
placeholder="Search"
/>
</div>
</MenuItem>
{['Metro_1125_Geo', 'DMA_1125_Geo', 'Other_1125_Geo'].map(
(each, index) => (
<MenuItem
value={each}
key={index}
className={classes.customedText}
>
{each}
</MenuItem>
)
)}
</Select>
<FormHelperText>Updated 6 days ago</FormHelperText>
</FormControl>
As you can see, i put the input in one of MenuItem
of the Select
, and I set the value for the input is an empty string, and when it was selected, it will be prevented to close the Select
but it is not worked out
Please tell me how to deal with it, thank you so much and have a good day
Aucun commentaire:
Enregistrer un commentaire