Giters

i18next / react-i18next

Internationalization for react done right. Using the i18next i18n ecosystem.

Home Page:https://react.i18next.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Trans component does not respect children w/ apostrophes in nested tags

dunnapey opened this issue · comments

commented

🐛 Bug Report

Trans component does not respect children that contain apostrophes inside nested tags such as when adding emphasis like so:

To Reproduce

<div>
  <Trans>
    On mobile Safari or Firefox, tap <strong>'Share'</strong> and <strong>'Add to Home Screen'</strong>
  </Trans>
</div>

or even just:

<div>
  <Trans>
    <span>'Share'</span>
  </Trans>
</div>
<div>
  <Trans>
    <span>&apos;Share&apos;</span>
  </Trans>
</div>
<div>
  <Trans>
    <span>{'\u0027'}Share{'\u0027'}</span>
  </Trans>
</div>

Each of these examples results in an output of 'Share

A combined example like so:

<div>
  <Trans>
    <p>'Share'</p>
    <p>&apos;Share&apos;</p>
    <p>{'\u0027'}Share{'\u0027'}</p>
  </Trans>
</div>

outputs:

'Share
Share
Share

Removing any tags wrapping that content:

<div>
  <Trans>
    'Share'&apos;Share&apos;{'\u0027'}Share{'\u0027'}
  </Trans>
</div>

Outputs: 'Share'Share'Share'

Removing the Trans component altogether:

<div>
  'Share'&apos;Share&apos;{'\u0027'}Share{'\u0027'}
<div>

Outputs: 'Share''Share''Share'
This is the expected output (but unstyled since the nested tags w/ apostrophes aren't respected. To be clear, the styles on content in nested tags are respected, just not the apostrophes in that content)
Trans component should honor this behavior for children containing apostrophes inside nested tags.

Expected behavior

I should be able to write:

<div>
  <Trans>
    On mobile Safari or Firefox, tap <strong>'Share'</strong> and <strong>'Add to Home Screen'</strong>
  </Trans>
</div>

and get:
image
instead of:
image

Your Environment

  • runtime version: node v20, browsers: Safari (iOS 17.0), Chrome 120, Firefox 120
  • i18next version: Tested 19.8.7 & 23.8.2
  • react-i18next version: Tested 11.17.3 & 14.0.1
  • react: 17.0.2
  • react-dom: 17.0.2
  • os: Mac, iOS, Android, Windows
commented

I'm not able to reproduce it: https://codesandbox.io/p/sandbox/react-i18next-http-example-x4x23d?file=%2Fsrc%2Fapp.js%3A30%2C9-32%2C17

Looking to see if there's any other dependency differences. I'm also on react@17.0.2 & react-dom@17.0.2 instead of latest. Does that make a difference?

commented

Interesting. I tried a different sandbox like Replit.com & it also succeeded. I'll have to find time to dig deeper & see what in my org's codebase isn't playing nicely with Trans in this scenario. Thanks for taking a look.