[Footer]: Custom links are overwritten by default ones after the initial render

[radarfox]

Description

I'm trying to integrate the footer component, but I'm having trouble customizing its content. I would like to pass custom data in links property. When I'm setting langList property the same way, everything works as expected. When I make a change in the source code and hot reload updates that module, the desired links suddenly show up. I'm using Next.js with @carbon/ibmdotcom-web-components.

Here is the example implementation:

import FooterContainer from '@carbon/ibmdotcom-web-components/es/components-react/footer/footer-container';
import { FC, useEffect, useRef } from 'react';

const langList = [
  { id: 'da', text: 'Danish / Dansk' },
  { id: 'nl', text: 'Dutch / Nederlands' },
  { id: 'en', text: 'English' },
];

const links = [
  {
    title: 'Quick links',
    links: [
      { title: 'About', url: '/about' },
      { title: 'Publications', url: '/publications' },
      { title: 'Blog', url: '/blog' },
      { title: 'Events', url: '/events' },
    ],
  },
  {
    title: 'Directories',
    links: [
      { title: 'Topics', url: '/topics' },
      { title: 'People', url: '/people' },
      { title: 'Projects', url: '/projects' },
    ],
  },
];

const Footer: FC = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) {
      return;
    }
    container.langList = langList;
    container.links = links;
  }, []);

  return <FooterContainer ref={containerRef} />;
};

export default Footer;

After debugging this problem for a while I have realized that the problem isn't in setting of the links, but rather for some reason after a few hundred miliseconds, the links will get overwritten by default links. With this knowledge I have come up with the following hotfix that seems to work. The only downside is the short "blink" as the default links are set and then changed back to custom ones. Some real fix from the Carbon team would be appriciated.

useEffect(() => {
  const container = containerRef.current as any;
  if (!container) {
    return;
  }
  // Set the custom links to the footer, this will immediately take effect.
  container.links = links;
  // The first custom title, that is expected to be displayed in the footer.
  const firstTitle = links[0].title;
  // The bug in the Carbon footer will cause the customized links to be
  // overwritten by a default links a few hundred milliseconds after the
  // initial rendering. Interval is set up to check when this happens.
  const intervalId = setInterval(() => {
    // Extract the text of the first title from the rendered footer.
    const firstRenderedTitle =
      container.children[0].children[1].children[0].getAttribute(
        'title-text',
      );
    // Compare the custom title with the rendered one. If they don't match, it
    // means that Carbon has already overwritten the links. If they do match,
    // do nothing and wait for the next invocation of the interval function.
    if (firstTitle !== firstRenderedTitle) {
      // Set the custom links for the second time, this time they won't be
      // overwritten and no further action is needed.
      container.links = links;
      // Stop invoking the interval, that checks the overwriting.
      clearInterval(intervalId);
    }
  }, 50);
  return () => {
    clearInterval(intervalId);
  };
}, []);

Component(s) impacted

Footer

Browser

Chrome

Carbon for IBM.com version

v2.28.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

https://research.ibm.com/

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

See the description

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[radarfox]

Today, I have noticed that my hotfix doesn't work, when the user will visit the page for the very first time after the browser is started. That means, the footer will overwrite the custom links at least twice. I have adjusted the hotfix to account for this. Unfortunately, that means that the interval needs to run for the whole time when the page is displayed, because we can't be sure if the second overwrite will hapen or not.

useEffect(() => {
  const container = containerRef.current as any;
  if (!container) {
    return;
  }
  // Set the custom links to the footer, immediately after its initialization.
  container.links = links;
  // The first custom title, that is expected to be displayed in the footer.
  const firstTitle = links[0].title;
  // The bug in the Carbon footer will cause the customized links to be
  // overwritten by a default links a few hundred milliseconds after the
  // initial rendering. This can happen up to two times. Interval is set up to
  // check when this happens.
  const intervalId = setInterval(() => {
    // Extract the text of the first title from the rendered footer.
    const firstRenderedTitle =
      container.children[0]?.children[1]?.children[0]?.getAttribute(
        'title-text',
      );
    // Compare the custom title with the rendered one. If they don't match, it
    // means that Carbon has already overwritten the links. If they do match,
    // do nothing and wait for the next invocation of the interval function.
    if (firstTitle !== firstRenderedTitle) {
      // Set the custom links again, to revert their change to default ones.
      container.links = links;
    }
  }, 50);
  return () => {
    clearInterval(intervalId);
  };
}, []);

[radarfox]

@Valentin-Sorin-Nicolae Hello, can you, please, explain why was this issue closed? This is the biggest problem with Carbon, that we are facing on the Research website and we are waiting for over a half a year for it to be fixed. It clearly seems to be an error, since you provide parameters to customize links and then you overwrite them multiple times once the footer is displayed.

[Valentin-Sorin-Nicolae]

Ok, it's reopen now and I will take a look. I close it being too old and no comment in the last half of the year.

[radarfox]

Thank you very much!