From 696611ae636b67c4bfadff5a920eca839cfb6bf4 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Tue, 13 May 2025 00:19:23 +0530 Subject: [PATCH] feat: Add Teleport component to fix RTL/LTR utility classes (#11455) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 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 ``, not on `` 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 --- .../components-next/TeleportWithDirection.vue | 28 +++++++++++++++++++ .../components-next/dialog/Dialog.vue | 9 ++---- .../dashboard/components/ChatList.vue | 15 +++++++--- .../dashboard/components/ui/ContextMenu.vue | 6 ++-- .../conversation/components/GalleryView.vue | 9 +++--- 5 files changed, 51 insertions(+), 16 deletions(-) create mode 100644 app/javascript/dashboard/components-next/TeleportWithDirection.vue diff --git a/app/javascript/dashboard/components-next/TeleportWithDirection.vue b/app/javascript/dashboard/components-next/TeleportWithDirection.vue new file mode 100644 index 000000000..3e9009f08 --- /dev/null +++ b/app/javascript/dashboard/components-next/TeleportWithDirection.vue @@ -0,0 +1,28 @@ + + + + diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.vue b/app/javascript/dashboard/components-next/dialog/Dialog.vue index 6800b1254..78ca5206b 100644 --- a/app/javascript/dashboard/components-next/dialog/Dialog.vue +++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue @@ -2,9 +2,9 @@ import { ref, computed } from 'vue'; import { OnClickOutside } from '@vueuse/components'; import { useI18n } from 'vue-i18n'; -import { useMapGetter } from 'dashboard/composables/store.js'; import Button from 'dashboard/components-next/button/Button.vue'; +import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue'; const props = defineProps({ type: { @@ -59,8 +59,6 @@ const emit = defineEmits(['confirm', 'close']); const { t } = useI18n(); -const isRTL = useMapGetter('accounts/isRTL'); - const dialogRef = ref(null); const dialogContentRef = ref(null); @@ -94,7 +92,7 @@ defineExpose({ open, close });