在Textfield资料中选择道具-ui

Question

我的Textfield有一个bug，我怎么能每次在下拉列表的中间而不是在他的左上角上升的时候得到我的地图标签？谢谢！

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>

Answer 1

您可以使用onClose来模糊集中于这样的Textfield：

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