Search code examples
reactjsselectmaterial-uitextfieldmenuitem

Select props in Textfield material-ui

i have a bug with my Textfield, how can i got my Maps label on the middle of the dropdown everytime not elevate at the top left on him ? Thanks !

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>
Solution

  • You can use onCloseto blur Textfield focused like this:

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