locale props with component isn't being render in 2.9.2 ?

[LatentDream]

I have a tour, using:

        <Joyride
            run={run}
            steps={steps}
            callback={callback}
            locale={{
                skip: <CustomSkipButton />
            }}

Where CustomSkipButton is a React component:

function CustomSkipButton() {
    return (
        <StyledCustomSkipButton>
            Click here to end tutorial
        </StyledCustomSkipButton>
    );
}

Migrating to the latest version (2.9.2), the CustomSkipButton isn't being rendered anymore. Only If I use plain text , the skip button is being display, e.g.:

        <Joyride
            run={run}
            steps={steps}
            callback={callback}
            locale={{
                skip: "Skip Button"
            }}

---

Did the API changed ? I still see ReactNode as the type input ? Or is this a bug ?

[gilbarbara]

Hey @LatentDream

Nope, it's still working.
Check the demo

[LatentDream]

Hey @gilbarbara, thanks for taking a look that quickly. Must be a something in our code base, I'll investigate further later today on why the switch to 2.9.1 to 2.9.2 does that

Thanks

[gilbarbara]

Yeah, I don't think that the changes in 2.9.2 would have an effect on locale.
Good old remove node_modules and reinstall?

[LatentDream]

It's actually the text being stripped from the element, with a custom component:

Example - Works on 2.9.1, but not on 2.9.2`

// Wrapping the <strong> in another element trigger the problem
function CustomSkipButton() {
  return <strong>This text won't be display in 2.9.2 (was display on 2.9.1)</strong>;
}

export default function BasicDemo(props: Props) {
  const { breakpoint } = props;
  const [{ run, steps }, setState] = useSetState<State>({
    run: false,
    steps: [
      {
        content: <h2>Let's begin our journey!</h2>,
        locale: { skip: <CustomSkipButton /> },
        placement: 'center',
        target: 'body',
      },
      {
        content: <h2>Let's begin our journey!</h2>,
        locale: { skip:  <strong>This text will be display in 2.9.2</strong> },
        placement: 'center',
        target: 'body',
      },
...

Related to this changed ?

[gilbarbara]

Damn, I forgot to add tests for this scenario.
I'm working on it.

[gilbarbara]

Released as 2.9.3
Thanks

[LatentDream]

Amazing! Thank you :)