ink-link does not render correctly when used within nested ink Box

[tknickman]

I am seeing a strange issue when using ink-link along with the Box provided by ink.

I am trying to make a two column layout with ink, utilizing links in each column.

As a test, here is a component using ink with no links:

const LinkBugExample = () => {
  return (
    <Box>
      <Box>Test</Box>
      <Box>Test</Box>
    </Box>
  );
};

This renders just fine:
TestTest

If I add links to the text as follows:

const LinkBugExample = () => {
  return (
    <Box>
      <Box>
        <Link url="www.google.com">google</Link>
      </Box>
      <Box>
        <Link url="www.bing.com">bing</Link>
      </Box>
    </Box>
  );
};

This does not render correctly and I get:
ww.google.comgooglbing where ww.google.comgoogl is the link to google, and bing is the link to bing.

Links works fine until I start nesting boxes.

Reading through the code here I'm inclined to think this is an issue with ink and not ink-link, but I thought I would start here to see what you may think.

Any ideas?

I'm using:
[email protected]
[email protected]

And my terminal is iTerm2 Build 3.3.9

[tknickman]

I'm going to move this over to ink, it seems that this only occurs using flexDirection="row" on a Box, which seems to imply that this is a bug with how ink is implementing yoga on the terminal. Thanks!

[tknickman]

For reference vadimdemedes/ink#269