mardi 23 février 2021

Material UI Select prevent closing

I am using material UI for my project and I have an UI like this

enter image description here

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