Materiall UI Outlined TextField shows Outlined text in border on mobile devices

Question

I want to use an outlined textField on my webapp, which does work on desktops, however it displays the outlined text within the border after the click on mobile devices and browsers.

This occures on every browser that I tested (Mozilla, Firefox, Chrome).

Is this a known bug or do I overlook something?

const useStyles = makeStyles((theme) => ({
    root: {
        padding: theme.spacing(3),
        flexGrow: 1,
    },
    gridRoot: {
        flexGrow: 1,
        borderColor: theme.palette.primary.light,
        borderRadius: 5,
        borderStyle: "solid",
        border: "1px",
    },
    gridHeader: {
        padding: theme.spacing(2),
        flexGrow: 1,
        backgroundColor: theme.palette.primary.light,
        minWidth: "100%",
        minHeight: 40,
        marginBottom: theme.spacing(2),
    },
    searchField: {
        width: "100%",
        height: "100%",
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
    },
    sortButton: {
        flexGrow: 1,
        width: "100%",
        height: "100%",
    },
}));

<Grid container className={classes.gridRoot}>
    <Grid container xs={12} justify="center" align="center">
        <Grid item xs={12}>
            <Grid container className={classes.gridHeader} direction="row-reverse">
                <Grid item xs={12} sm={3}>
                    <div
                        style={{
                            background: "red",
                            width: "100%",
                            height: 50,
                        }}
                    />
                </Grid>
                <Grid item xs={12} sm={9}>
                    <TextField
                        id="outlined-search"
                        label="Search field"
                        type="search"
                        variant="outlined"
                        className={classes.searchField}
                        onChange={(event) => console.log(event)}
                    />
                </Grid>
            </Grid>
        </Grid>
    </Grid>
    {/* other content */}
</Grid>;

Here are the image links of the screenshots:

page on mobile

page on desktop

Answer 1

A workaround is to apply margin on small devices:

const useStyles = makeStyles((theme) => ({
    root: {
        padding: theme.spacing(3),
        flexGrow: 1,
    },
    gridRoot: {
        flexGrow: 1,
        borderColor: theme.palette.primary.light,
        borderRadius: 5,
        borderStyle: "solid",
        border: "1px",
    },
    gridHeader: {
        padding: theme.spacing(2),
        flexGrow: 1,
        backgroundColor: theme.palette.primary.light,
        minWidth: "100%",
        minHeight: 40,
        marginBottom: theme.spacing(2),
    },
    searchField: {
        width: "100%",
        height: "100%",
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
        [theme.breakpoints.down('sm')]: {
          backgroundColor: theme.palette.secondary.main,
        },
    },
    searchFieldLabel: {  //<-------------------
        [theme.breakpoints.down('sm')]: {
          marginLeft: 20, //<---- 20 for example
        },
    },
    sortButton: {
        flexGrow: 1,
        width: "100%",
        height: "100%",
    },
}));

and

<TextField
  id="outlined-search"
  label="Search field"
  type="search"
  variant="outlined"
  classes={{root:classes.searchField, label:classes.searchFielLabel}}
  onChange={(event) => console.log(event)}
/>