Wrong direction in textarea on localized rtl text

[hfkhrni]

Link to reproduction

No response

Environment Info

Binaries:
  Node: 22.8.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.10.0
Relevant Packages:
  payload: 3.0.0-beta.109
  next: 15.0.0-canary.160
  @payloadcms/db-mongodb: 3.0.0-beta.109
  @payloadcms/email-nodemailer: 3.0.0-beta.109
  @payloadcms/graphql: 3.0.0-beta.109
  @payloadcms/next/utilities: 3.0.0-beta.109
  @payloadcms/plugin-cloud: 3.0.0-beta.109
  @payloadcms/plugin-cloud-storage: 3.0.0-beta.109
  @payloadcms/richtext-lexical: 3.0.0-beta.109
  @payloadcms/storage-s3: 3.0.0-beta.109
  @payloadcms/translations: 3.0.0-beta.109
  @payloadcms/ui/shared: 3.0.0-beta.109
  react: 19.0.0-rc-5dcb0097-20240918
  react-dom: 19.0.0-rc-5dcb0097-20240918
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Thu Sep 12 18:26:09 UTC 2024
  Available memory (MB): 23695
  Available CPU cores: 12

Describe the Bug

Wrong direction in textarea on localized rtl text, screenshot attached shows the difference between text and textarea, it should be like textarea

Reproduction Steps

same beta version in env info, put a textarea field in a collection then write inside it in an rtl language

Adapters and Plugins

No response

[paulpopus]

I tested with arrays, blocks and normal fields and I can't reproduce this. Can you share your problematic config please?

[hfkhrni]

my payload UI is in english, the problem is when you write inside the text area in arabic

payload.config.ts

export default buildConfig({
  admin: {
    user: Users.slug,
    importMap: {
      baseDir: path.resolve(dirname),
    },
  },
  collections: [Users, Media, Pages, Categories],
  localization: {
    locales: [
      {
        label: 'English',
        code: 'en',
      },
      {
        label: 'Arabic',
        code: 'ar',
        // opt-in to setting default text-alignment on Input fields to rtl (right-to-left)
        // when current locale is rtl
        rtl: true,
      },
    ],
    defaultLocale: 'en',
    // fallback: true,
  },
  editor: lexicalEditor(),
  secret: process.env.PAYLOAD_SECRET || '',
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  db: mongooseAdapter({
    url: process.env.DATABASE_URI || '',
  }),
  sharp,
  cors: ['http://localhost:3000'],
  csrf: ['http://localhost:3000'],

  plugins: [
    s3Storage({
      collections: {
        [Media.slug]: true,
      },
      bucket: process.env.S3_BUCKET || '',
      config: {
        endpoint: process.env.S3_ENDPOINT || '',
        credentials: {
          accessKeyId: process.env.S3_ACCESS_KEY_ID || '',
          secretAccessKey: process.env.S3_SECRET_ACCESS_KEY || '',
        },
        region: process.env.S3_REGION || '',
      },
    }),
  ],
})

collection.ts

{
      name: 'layout',
      labels: {
        singular: 'block',
        plural: 'blocks',
      },
      type: 'blocks',
      blocks: [Paragraph, Heading],
    } 

parapgraph.ts

import { Block } from 'payload'

export const Paragraph: Block = {
  slug: 'paragraph',
  fields: [
    {
      name: 'paragraph',
      type: 'textarea',
      localized: true,
    },
  ],
}

heading.ts

import { Block } from 'payload'

export const Heading: Block = {
  slug: 'heading',
  fields: [
    {
      name: 'heading',
      type: 'text',
      localized: true,
    },
  ],
}

text is working correctly and textarea is not

here's Arabic text you can test with

يولد جميع الناس أحرارًا متساوين في الكرامة والحقوق. وقد وهبوا عقلاً وضميرًا وعليهم أن يعامل بعضهم بعضًا بروح الإخاء.

كل الناس سواسية أمام القانون ولهم الحق في التمتع بحماية متكافئة عنه دون أية تفرقة، كما أن لهم جميعاً الحق في حماية متساوية ضد أي تمييز يُخل بهذا الإعلان وضد أي تحريض على تمييز كهذا.

[hfkhrni]

sorry, closed the issue by mistake

[paulpopus]

Thanks this will be fixed in https://github.com/payloadcms/payload/pull/8474