How to stop Grommet component from looping in Safari

Question

I created a dynamic editor component with Grommet in my header and footer tabs. When the site is viewed in safari, each editor is changing its position when I make a change in the data like font size. It is an issue only in safari: it works normal in Chrome and Firefox on Macintosh, windows, and Linux. It also doesn't occur in safari Big Sur, but it does in previous versions of mac, like Catalina and High Sierra.

Here is my code and a screenshot of the component:

{toPairs(footerTexts).map(
  ([key, text]) =>
    text !== undefined && (
      <Box
        id={text.id}
        key={text.id}
        style={{
          height: 132,
          width: 500,
          paddingTop: 20,
        }}
      >

Answer 1

I fixed it by adding a sorter, such that the sorter function sorts the object by the time it was created, basically, the issue was where I update the state

{toPairs(headerTexts)
    .map(([, text]) => text)
    .sort(sorter)
    .map(
      (text) =>
        text !== undefined && (
            <Box
              key={text.id}
              style={{
                width: 500,
                marginTop: 20,
              }}
            >

Updating the state will push the updated object to the end of the object so the one editor that is updated now will go to the bottom of the object, that's why it was looping.

const updateTextFooter = (text, key) => {
    if (key !== "") {
      setFooterTexts({
        ...footerTexts,
        [key]: {
          ...footerTexts[key],
          text,
        },
      });
    }
  };

to fix this issue this is the sorter that i added

const sorter = (a, b) => {
    const first = a.createdAt;
    const second = b.createdAt;
    let comparison = 0;
    if (first > second) {
      comparison = 1;
    } else if (first < second) {
      comparison = -1;
    }
    return comparison;
  };

Thank you all for the help, feels good to be in here.

Answer 2

Try to see if replacing the styles with actual grommet props does the the trick, and on top of it, just to seal it off a little more, see if adding flex={false} does the trick as follows:

{toPairs(footerTexts).map(
  ([key, text]) =>
    text !== undefined && (
      <Box
        id={text.id}
        key={text.id}
        height="132px"
        width="500px"
        pad={{top: "20px"}}
        flex={false}
      >