Accordion Header not updating

[tommy-codez]

Hi there, it seems there is a bug or strange behavior in the accordion component. (Didn't check other components yet)

I use react and a translation functionality with (react-i18next). With normal behavior the change of language causes a rerender of all the text where the translation hook is invoked. (t-function)

here the beginning of an example code

import React from "react";
import { useTranslation } from "react-i18next";

import {
  ScaleAccordion,
  ScaleCollapsible,
} from "@telekom/scale-components-react";

const MyAccordion = (props) => {
  const { t } = useTranslation();

  return (
    <div>
      {t("sm1")}
      <ScaleAccordion>
        <ScaleCollapsible>
          <h1>{t("sm1")}</h1>
          <p>
            {t("sm1")} Freegan kinfolk farm-to-table humblebrag cred, hammock
            bespoke small batch pabst…
          </p>

after the language changes every instance of t("sm1") gets correctly translated (the one before the accordion and the one inside the p-tag - except the one in the header (h1) .. any idea why - or is there a workaround?

[acstll]

Thanks again @tommy-codez for reporting this.

This is a very interesting one. The accordion component uses a "progressive enhancement" approach (based on this) that does some direct DOM manipulation in the light DOM, if I remember correctly; that should be causing this unexpected behaviour.

Let's see how we can fix this one. (A possible workaround until we have a fix would be wrapping the accordion in an extra React component, to make sure it completely re-renders on each language change?)

[tommy-codez]

Hi there again :) when the fix is official I will test it again if it works with the translation library. As I said we will use the scale components in our project in the upcoming time and I will report bugs here if we find some :) Greetings