mirror of
https://github.com/chatwoot/chatwoot.git
synced 2026-07-07 21:14:32 +08:00
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
# 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> |
||
|---|---|---|
| .. | ||
| Accordion | ||
| avatar | ||
| banner | ||
| breadcrumb | ||
| button | ||
| Campaigns | ||
| captain | ||
| checkbox | ||
| colorpicker | ||
| combobox | ||
| Contacts | ||
| Conversation/ConversationCard | ||
| copilot | ||
| CustomAttributes | ||
| dialog | ||
| dropdown-menu | ||
| Editor | ||
| feature-spotlight | ||
| filter | ||
| flag | ||
| HelpCenter | ||
| icon | ||
| Inbox | ||
| inline-input | ||
| input | ||
| Label | ||
| message | ||
| NewConversation | ||
| pagination | ||
| phonenumberinput | ||
| selectmenu | ||
| sidebar | ||
| spinner | ||
| switch | ||
| tabbar | ||
| taginput | ||
| textarea | ||
| CardLayout.vue | ||
| EmptyStateLayout.vue | ||
| TeleportWithDirection.vue | ||