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>
This commit is contained in:
Sivin Varghese
@@ -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>
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
|
||||
import { useWindowSize, useElementBounding } from '@vueuse/core';
|
||||
|
||||
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
|
||||
|
||||
const props = defineProps({
|
||||
x: { type: Number, default: 0 },
|
||||
y: { type: Number, default: 0 },
|
||||
@@ -57,7 +59,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<TeleportWithDirection to="body">
|
||||
<div
|
||||
ref="menuRef"
|
||||
class="fixed outline-none z-[9999] cursor-pointer"
|
||||
@@ -67,5 +69,5 @@ onMounted(() => {
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</Teleport>
|
||||
</TeleportWithDirection>
|
||||
</template>
|
||||
|
||||
@@ -11,6 +11,7 @@ import { downloadFile } from '@chatwoot/utils';
|
||||
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
|
||||
|
||||
const props = defineProps({
|
||||
attachment: {
|
||||
@@ -166,7 +167,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<TeleportWithDirection to="body">
|
||||
<woot-modal
|
||||
v-model:show="show"
|
||||
full-width
|
||||
@@ -258,7 +259,7 @@ onMounted(() => {
|
||||
<div class="flex items-center justify-center w-16 shrink-0">
|
||||
<NextButton
|
||||
v-if="hasMoreThanOneAttachment"
|
||||
icon="i-lucide-chevron-left"
|
||||
icon="ltr:i-lucide-chevron-left rtl:i-lucide-chevron-right"
|
||||
class="z-10"
|
||||
blue
|
||||
faded
|
||||
@@ -324,7 +325,7 @@ onMounted(() => {
|
||||
<div class="flex items-center justify-center w-16 shrink-0">
|
||||
<NextButton
|
||||
v-if="hasMoreThanOneAttachment"
|
||||
icon="i-lucide-chevron-right"
|
||||
icon="ltr:i-lucide-chevron-right rtl:i-lucide-chevron-left"
|
||||
class="z-10"
|
||||
blue
|
||||
faded
|
||||
@@ -351,5 +352,5 @@ onMounted(() => {
|
||||
</footer>
|
||||
</div>
|
||||
</woot-modal>
|
||||
</Teleport>
|
||||
</TeleportWithDirection>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user