How to Make MUI TextField label behave as default whilst having a Start Input Adornment

17 Views Asked by At

I am currently trying to implement a start input adornment in input props in my MUI TextField, however when i do so the default label sits where it sits when the text field is focused (but it's in the unfocused state as it's grey):

faulty label orientation

However when I have an end input adornment in the input probs the label sit where I want it to, in the default place:

enter image description here

How can I make it so I have the start input adornment and the label behaves as expected for MUI text labels?

Code:

<TextField
    id="code-input"
    fullWidth error={errorCondition}
    value={usersVerificationCodeInput}
    label={text.EnterTheCode.enterCode[userData.language]}
    onChange={handleUserVerificationCodeInput}
    InputLabelProps={
        errorCondition ? 
        { 
            sx: {
                color: usersVerificationCodeInput ? '#d32f2f' : 'rgb(95,99,104) !important',
                '&.Mui-focused': {
                    color: '#d32f2f !important',
                },
            },
        } : {
            sx: {
                color: "rgb(95,99,104)",
            }
        }
    }
    sx={
        errorCondition ? 
        {} : 
        {
            transform: "translate(14px, 16px) scale(1)",
            '&.Mui-focused': {
                transform: "translate(14px, -6px) scale(0.75)"
            },
            "& .MuiOutlinedInput-root": {
                "&:hover:not(.Mui-focused) fieldset": {
                    borderColor: "#dadce0"
                },
                "& fieldset": {
                    borderColor: "#dadce0"
                },
            },
        }
    }
    InputProps={{
        startAdornment: 
            <InputAdornment position="start">
                <Typography sx={{ color: '#202124', fontSize: '0.875em', fontWeight: '400' }}>
                    G-
                </Typography>
            </InputAdornment>,
    }}
/>

InputProps when label behaves as expected:

InputProps={{
    endAdornment: 
        <InputAdornment position="end">
            <Typography sx={{ color: '#202124', fontSize: '0.875em', fontWeight: '400' }}>
                G-
            </Typography>
        </InputAdornment>,
}}

Tried adding start input adornment but label moved unexpectedly

0

There are 0 best solutions below