0

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>

1 Answer 1

0

You can use onCloseto blur Textfield focused like this:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.