motion icon indicating copy to clipboard operation
motion copied to clipboard

[BUG] AnimatePresence `mode="popLayout"` assumes LTR, works differently/unexpectedly in RTL

Open benface opened this issue 1 year ago • 0 comments

1. Read the FAQs 👇

2. Describe the bug

There is code in AnimatePresence's mode="popLayout" behavior that assumes the current text direction is LTR, because it sets the left property instead of inset-inline-start.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/x4hf8j

4. Steps to reproduce

  1. Click on "Toggle Second Column" a few times to see the enter animation of the second column. Notice the container expands and the column fades in, but it doesn't move.
  2. Click on "Toggle Direction" to set the direction to RTL.
  3. Click on "Toggle Second Column" a few times to see the enter animation of the second column in RTL direction. Notice the second column now moves from right to left as it fades in.

5. Expected behavior

The second column should not move as it fades in in RTL direction.

6. Video or screenshots

https://github.com/user-attachments/assets/54fc1195-0aeb-42f3-b817-7da480c491f0

7. Environment details

Chrome 131.0.6778.205 on macOS.

benface avatar Dec 19 '24 19:12 benface