RTL on MuiTextField goes wrong using Special Charcters

I'm currently working on a project using Mui, I have successfully implemented RTL using Mui guide. I'm facing an annoying issue where special characters on MuiTextField are aligned to the Left and not to the right.

When typing secretpassword123! into a TextField the the '!' character goes to the left.

example

      <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 noticed many people faced the same issue but the solutions were not good for my case.

Solution 1:

This is standard behavior with RTL. Here is the same password typed into google's IL website . It's not a bug but a feature and it's what RTL users are used to in all their other apps/websites when typing latin text.

To override just one TextField per docs, you can do the following:

import { styled } from '@mui/material';

const LtrInput = styled("input")`
  /* @noflip */
  direction: ltr;
`;

<TextField
  InputProps={{ inputComponent: LtrInput }}
  label={"Test"}
  sx={{ "& .MuiInputBase-input": { textAlign: "end" } }}
/>