[material-ui][Autocomplete] Fix adornments misaligned RTL

[solomonalem]

• I have followed (at least) the PR section of the contributing guide.

Closes: 45193

Local Demo

• Used createTheme to create thertldirection to test it locally
• The changes will not change existing (ltr) implementation

[solomonalem]

@DiegoAndai this is for #45193

[mui-bot]

Netlify deploy preview

https://deploy-preview-45330--material-ui.netlify.app/

@material-ui/core: parsed: +0.07% , gzip: +0.02%
Autocomplete: parsed: +0.25% , gzip: +0.06%
Chip: parsed: +0.40% , gzip: +0.08%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 2903c11

[DiegoAndai]

Hey @solomonalem, thanks for working on this!

1. On the deploy preview (link), the adornments still look misaligned. Do you know why?

   

2. May I ask you to add a test for this? It should be included in the regression tests, here's an example for the Button component: /~https://github.com/mui/material-ui/blob/master/test/regressions/fixtures/Button/MultilineButton.js (you will have to create folder for the Chip component)

[solomonalem]

@DiegoAndai

1. How did you implement RTL? Which option did you use—createTheme or including it in index.html? I'm asking because the component expects the direction to come from the theme. If you've applied RTL differently, we can account for those cases as well.

2. I'll take care of that.

[DiegoAndai]

Hey @solomonalem!

1. The link I shared uses the docs' RTL implementation, which is defined here. It set's the direction on createTheme (reference) as well as the body's dir (reference)

You can test this locally by running pnpm docs:dev and visiting localhost:3000