diff --git a/packages/ui/src/fields/Slug/index.css b/packages/ui/src/fields/Slug/index.css index 10ccab85afc..2f747df8533 100644 --- a/packages/ui/src/fields/Slug/index.css +++ b/packages/ui/src/fields/Slug/index.css @@ -37,6 +37,20 @@ gap: var(--spacer-1); } + .field-error.tooltip { + pointer-events: none; + } + + html:not([dir='RTL']) & .field-error.tooltip { + inset-inline-start: 0; + inset-inline-end: auto; + } + + html[dir='RTL'] & .field-error.tooltip { + inset-inline-end: 0; + inset-inline-start: auto; + } + .slug-field-component__action-btn { display: flex; align-items: center; diff --git a/packages/ui/src/fields/Slug/index.tsx b/packages/ui/src/fields/Slug/index.tsx index 71c7731945c..c8e1578a8a2 100644 --- a/packages/ui/src/fields/Slug/index.tsx +++ b/packages/ui/src/fields/Slug/index.tsx @@ -2,7 +2,7 @@ import type { SlugFieldClientProps } from 'payload' -import { getTranslation } from '@payloadcms/translations' +import { getTranslation, rtlLanguages } from '@payloadcms/translations' import React, { useCallback, useState } from 'react' import { Button } from '../../elements/Button/index.js' @@ -30,6 +30,8 @@ export const SlugField: React.FC = ({ field, path, useAsSl const { i18n, t } = useTranslation() + const isRTL = (rtlLanguages as readonly string[]).includes(i18n.language) + const { collectionSlug, globalSlug } = useDocumentInfo() const { slugify } = useServerFunctions() @@ -116,7 +118,7 @@ export const SlugField: React.FC = ({ field, path, useAsSl >
- +