scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-01 03:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add Teleport component to fix RTL/LTR utility classes (#11455)

Browse Source 
# 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>
This commit is contained in:
Sivin Varghese
2025-05-13 00:19:23 +05:30
committed by GitHub
parent 1b45eb70c9
commit 696611ae63
5 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/dashboard/components/ChatList.vue
View File

@@ -30,6 +30,7 @@ import ConversationItem from './ConversationItem.vue';
import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
import IntersectionObserver from './IntersectionObserver.vue';
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
import { useUISettings } from 'dashboard/composables/useUISettings';
import { useAlert } from 'dashboard/composables';
@@ -840,14 +841,17 @@ watch(conversationFilters, (newVal, oldVal) => {
@basic-filter-change="onBasicFilterChange"
/>
<Teleport v-if="showAddFoldersModal" to="#saveFilterTeleportTarget">
<TeleportWithDirection
v-if="showAddFoldersModal"
to="#saveFilterTeleportTarget"
>
<SaveCustomView
v-model="appliedFilter"
:custom-views-query="foldersQuery"
:open-last-saved-item="openLastSavedItemInFolder"
@close="onCloseAddFoldersModal"
/>
</Teleport>
</TeleportWithDirection>
<DeleteCustomViews
v-if="showDeleteFoldersModal"
@@ -944,7 +948,10 @@ watch(conversationFilters, (newVal, oldVal) => {
</template>
</DynamicScroller>
</div>
<Teleport v-if="showAdvancedFilters" to="#conversationFilterTeleportTarget">
<TeleportWithDirection
v-if="showAdvancedFilters"
to="#conversationFilterTeleportTarget"
>
<ConversationFilter
v-model="appliedFilter"
:folder-name="activeFolderName"
@@ -953,6 +960,6 @@ watch(conversationFilters, (newVal, oldVal) => {
@update-folder="onUpdateSavedFilter"
@close="closeAdvanceFiltersModal"
/>
</Teleport>
</TeleportWithDirection>
</div>
</template>