Currently, I am working on a project where Mui is being used. I have successfully applied RTL according to the Mui guide. However, I am encountering a frustrating problem where special characters in MuiTextField are aligning to the left instead of the right.
For example, when entering secretpassword123! into a TextField, the '!' character shifts to the left.
<TextField
error={Boolean(formik.touched.password && formik.errors.password)}
fullWidth
helperText={formik.touched.password && formik.errors.password}
label={t("password")}
margin="dense"
name="password"
onBlur={formik.handleBlur && handlePasswordFieldBlur}
onFocus={handlePasswordFieldFocus}
onChange={formik.handleChange}
type={isPasswordVisible ? "text" : "password"}
value={formik.values.password}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={handleVisibilityIconClick}>
{isPasswordVisible ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
/>
I have come across many others facing the same issue, but their solutions did not work for my specific situation.