Countdown isn't working on safari browser

[Mohammed amine bessaad]

I already checked the old issues but no one of them worked, the problem here it's not counting at all, it's stuck like that, but if i tried on chrome it'll work normally

here's my code:
<Countdown date={data?.endsAt} autoStart renderer={renderer}>

and renderer:

const renderer: CountdownRendererFn = ({
    seconds,
    minutes,
    hours,
    days,
    completed,
  }) => {
    if (completed) {
      return "Completed";
    } else {
      let avItems = [days || 0x0, hours || 0x0, minutes || 0x0, seconds || 0x0];

      for (let i = 0x0; i < avItems.length; i++) {
        if (!avItems[i]) {
          avItems.splice(i, 0x1);
          i--;
        } else {
          break;
        }
      }

      let avItemsStr = avItems.map((item) => (item < 0xa ? `0${item}` : item));

      return <span style={{ marginLeft: "3px" }}>{avItemsStr.join(":")}</span>;
    }
  };

i've latest version of safari

[Martin V.]

Hi, what's the value you are passing into date?

[Mohammed amine bessaad]

@ndresx , it's timestamp 1678614332535

[Mohammed amine bessaad]

@ndresx , I just found the solution, so each update means render right, and in this case we need renderer component return a unique element using key attribute, so when i tried to add key attribute but it must be unique, it worked!

so here's my code, i just added key attribute:

const renderer: CountdownRendererFn = ({
    seconds,
    minutes,
    hours,
    days,
    completed,
  }) => {
    if (completed) {
      return "Completed";
    } else {
      let avItems = [days || 0x0, hours || 0x0, minutes || 0x0, seconds || 0x0];

      for (let i = 0x0; i < avItems.length; i++) {
        if (!avItems[i]) {
          avItems.splice(i, 0x1);
          i--;
        } else {
          break;
        }
      }

      let avItemsStr = avItems.map((item) => (item < 0xa ? `0${item}` : item));

-       return <span style={{ marginLeft: "3px" }}>{avItemsStr.join(":")}</span>;
+      return <span style={{ marginLeft: "3px" }} key={avItems.join("")}>{avItemsStr.join(":")}</span>;
    }
    }
  };

just one other point i've to mention the default renderer have the same issue, so i hope this will help u

[Martin V.]

Could you eventually give me a codesandbox example or similar to reproduce this, please?

Does this work for you https://codesandbox.io/s/sad-zhukovsky-hs7hc?

[Mohammed amine bessaad]

yeah, it worked on sandbox

[Mohammed amine bessaad]

@ndresx thank you for your time