在Textfield material-ui中选择道具

如何解决在Textfield material-ui中选择道具

我的文本字段有一个错误，我怎样才能在每次不提升他的左上角时将我的地图标签放在下拉列表的中间？谢谢！

https://gyazo.com/bee6945888e3f133de983cece3565d69

              <TextField
                select
                defaultValue
                variant="outlined"
                size="small"
                value={filter.map ?? ""}
                onChange={(event) => handleChangeValue(event)}
                label="Maps"
                name="map"
                className={classes.formControl}>
                <Box display="flex" justifyContent="center">
                  <MenuItem className={classes.formControl} value="">All Maps</MenuItem>
                </Box>
                <MenuItem className={classes.formControl} value="de_inferno"><img src={infernoIcon} height="20px" />&nbsp; &middot; &nbsp;de_inferno</MenuItem>
                <MenuItem className={classes.formControl} value="de_dust2"><img src={d2Icon} height="20px" />&nbsp; &middot; &nbsp;de_dust2</MenuItem>
                <MenuItem className={classes.formControl} value="de_mirage"><img src={mirageIcon} height="20px" />&nbsp; &middot; &nbsp;de_mirage</MenuItem>
                <MenuItem className={classes.formControl} value="de_nuke"><img src={nukeIcon} height="20px" />&nbsp; &middot; &nbsp;de_nuke</MenuItem>
                <MenuItem className={classes.formControl} value="de_train"><img src={trainIcon} height="20px" />&nbsp; &middot; &nbsp;de_train</MenuItem>
                <MenuItem className={classes.formControl} value="de_overpass"><img src={overpassIcon} height="20px" />&nbsp; &middot; &nbsp;de_overpass</MenuItem>
                <MenuItem className={classes.formControl} value="de_vertigo"><img src={vertigoIcon} height="20px" />&nbsp; &middot; &nbsp;de_vertigo</MenuItem>
              </TextField>

解决方法

您可以使用 onClose 像这样模糊文本字段：

    ...
    label="Maps"
    name="map"
    SelectProps={{
      onClose: () => {
        setTimeout(() => {
          document.activeElement.blur();
        },0);
      },}}
    ...