[Bug]: Tipseen nests a div inside of a p tag

[ahlivehr]

Vibe version

2.93.0

Describe the bug

Getting the following warning in the Chrome console when using a Tipseen. Warning: validateDOMNesting(...):

cannot appear as a descendant of

.

When inspecting the DOM in the Storybook basic example, you can see it does indeed nest a div inside a p tag (see screenshot). Though in Storybook, I don't see the same warning in the Chrome console.

Expected behavior

Tipseen doesn't nest a div inside of a p tag.

Steps to reproduce

1. Add a Tipseen to a react project (I'm using vite) and run the project

<Tipseen
  content={<TipseenContent title="Title">Popover message will appear here loremipsum dolor samet…</TipseenContent>}
  modifiers={[
    {
      name: 'preventOverflow',
      options: {
        mainAxis: false
      }
    },
    {
      name: 'flip',
      options: {
        fallbackPlacements: []
      }
    }
  ]}
  position="right"
>
  <div className="monday-storybook-tipseen_container" />
</Tipseen>

3. Open the Chrome console and you can see the warning: Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

Reproduction example link

No response

System Info

System:
    OS: macOS 14.3.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 141.75 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.1 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /usr/local/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 122.0.6261.94
    Safari: 17.3.1

Additional context, Screenshots

[ahlivehr]

The specific place in the source code where the issue comes from is: https://github.com/mondaycom/monday-ui-react-core/blob/c057a2e83d2d3fb62c05e29ab768f44a77045fe9/packages/core/src/components/Tipseen/Tipseen.tsx#L146

Notice how the element is "p", but if you put a TipseenContent element inside of it, there will be a div inside of a p tag.

[HermanBide]

has this been fixed ?

[ahlivehr]

@HermanBide I don't think it has. I just filed this bug yesterday.

[HermanBide]

can i contribute to fixing this bug ?

[shaharzil]

Hi @ahlivehr and thank you for bringing this bug to our attention :)

Thank you @HermanBide , We would appreciate it if you could contribute to fixing the problem. I'll just mention that since the fix may be a breaking change, we may not be able to merge it right now and can only include it in our next major version

[ahlivehr]

@shaharzil No problem! Do you happen to know roughly when the next major version will be released? I really appreciate everyone's continuous contributions to this repo.

[HermanBide]

awesome please assign this to me ill work on it asap

[HermanBide]

the bug error doesnt show in the console anymore. here is what i did -> I removed the div inside Tipseen since a 'p' element could not nest a 'div' and instead placed the Tipseen inside the div in component "tipseen.stories.js" which stopped the error.

   <div className="monday-storybook-tipseen_container">
          <Tipseen
            modifiers={modifiers}
            position={Tipseen.positions.RIGHT}
            content={
              <TipseenContent title="This is a title" hideDismiss>
                Popover message will appear here loremipsum dolor samet…
              </TipseenContent>
            }
          />
        </div>

please try this instead and let me know if you are still getting the same error. also there seem to be a bug about id in Tipseen.tsx

[HermanBide]

let me know if you also need help with the other bug

react-jsx-runtime.development.js:124 Warning: Invalid prop id supplied to React.Fragment. React.Fragment can only have key and children props.

[HermanBide]

what component ->folder/file is this code in so that i can fix it?