chatwoot/app/javascript
Sivin Varghese 696611ae63
Some checks failed
Frontend Lint & Test / test (push) Has been cancelled
Publish Chatwoot EE docker images / build (linux/amd64, ubuntu-latest) (push) Has been cancelled
Publish Chatwoot EE docker images / build (linux/arm64, ubuntu-22.04-arm) (push) Has been cancelled
Publish Chatwoot CE docker images / build (linux/amd64, ubuntu-latest) (push) Has been cancelled
Publish Chatwoot CE docker images / build (linux/arm64, ubuntu-22.04-arm) (push) Has been cancelled
Run Chatwoot CE spec / test (push) Has been cancelled
Publish Chatwoot EE docker images / merge (push) Has been cancelled
Publish Chatwoot CE docker images / merge (push) Has been cancelled
feat: Add Teleport component to fix RTL/LTR utility classes (#11455)
# Pull Request Template

## Description

This PR introduces a `CustomTeleport` component that wraps Vue's
Teleport to preserve directionality context (ltr / rtl) when teleporting
content outside the app’s root container.

### Problem
Currently, the app sets the text direction (`[dir="ltr"]` or
`[dir="rtl"]`) on a container `div` inside `<body>`, not on `<body>`
itself. When content is teleported directly into `body`, it no longer
inherits the correct direction context. As a result, direction-aware
utility classes like `ltr:pl-2`, `rtl:ml-1`, etc., break because CSS
selectors like `[dir="ltr"] .ltr\:pl-2` no longer match. Identified this
issue when working on this
[PR](https://github.com/chatwoot/chatwoot/pull/11382)

### Solution
The `CustomTeleport` component automatically applies the correct `[dir]`
attribute (`ltr` or `rtl`) on the teleported content's wrapper based on
the current `isRTL` setting from the store. This ensures that
direction-specific Tailwind utility classes continue to work as
expected, even when the content is rendered outside the app root.

## Type of change

- [x] New feature (non-breaking change which adds functionality)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
2025-05-12 11:49:23 -07:00
..
dashboard feat: Add Teleport component to fix RTL/LTR utility classes (#11455) 2025-05-12 11:49:23 -07:00
design-system feat: Add histoire for component playground (#10256) 2024-10-09 22:10:53 -07:00
entrypoints feat: handle rails turbo morphing (#11422) 2025-05-07 10:22:08 +05:30
portal chore: Make the table of contents in help center sticky (#11448) 2025-05-09 08:44:44 +05:30
sdk feat: handle rails turbo morphing (#11422) 2025-05-07 10:22:08 +05:30
shared fix: Update flag from countries.js (#11401) 2025-05-01 09:03:36 -07:00
superadmin_pages chore: fix circleci on vite build (#10214) 2024-10-07 15:27:41 +05:30
survey feat: Add RTL Support to Widget (#11022) 2025-03-21 09:39:03 -07:00
v3 feat: allow auto resolve waiting option (#11436) 2025-05-08 12:52:17 +05:30
widget feat: widget opened and closed events (#11240) 2025-04-24 17:01:39 +05:30
histoire.setup.ts feat: Add compose conversation components (#10457) 2024-12-05 16:31:47 -08:00