Radix select showing weird behaviour when inside tippy popup

[arjendevos]

This is my select:

 return (
    <Select.Root
      value={activeItem.key}
      onValueChange={(nextValue) => {
        nodeItems?.[nextValue]?.command(editor);
      }}
    >
      <Select.Trigger asChild>
        <EditorBubbleMenuButton className="inline-flex gap-2 text-nowrap px-2 text-sm font-normal">
          <Select.Icon>
            <ChevronDownIcon />
          </Select.Icon>
        </EditorBubbleMenuButton>
      </Select.Trigger>
      <Select.Portal>
        <Select.Content className="overflow-hidden rounded-md border border-gray-100 bg-white shadow-sm">
          <Select.ScrollUpButton className="text-violet11 flex h-[25px] cursor-default items-center justify-center bg-white">
            <ChevronUpIcon />
          </Select.ScrollUpButton>
          <Select.Viewport className="p-1">
            {nodeItemsArray.map((item) => (
              <SelectItem key={item.key} value={item.key}>
                {item.label}
              </SelectItem>
            ))}
          </Select.Viewport>
          <Select.ScrollDownButton className="text-violet11 flex h-[25px] cursor-default items-center justify-center bg-white">
            <ChevronDownIcon />
          </Select.ScrollDownButton>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );

This is my bubblemenu (tiptap editor). This uses tippy to show:

function EditorBubbleMenu({ editor }: EditorBubbleMenuProps) {
  return (
    <BubbleMenu
      editor={editor}
      tippyOptions={{
        zIndex: 99
      }}
      className="animation-opacity relative inline-flex gap-1 overflow-x-auto rounded-md border border-gray-100 bg-white px-1 text-white shadow-sm"
    >
      <EditorBubbleMenuTextStyle editor={editor} />
      <span className="border border-gray-100"></span>
      <EditorBubbleMenuButton active={editor.isActive('bold')} onClick={() => editor.chain().focus().toggleBold().run()}>
        <FontBoldIcon height={18} width={18} />
      </EditorBubbleMenuButton>

      <EditorBubbleMenuButton active={editor.isActive('italic')} onClick={() => editor.chain().focus().toggleItalic().run()}>
        <FontItalicIcon height={18} width={18} />
      </EditorBubbleMenuButton>

      <EditorBubbleMenuButton active={editor.isActive('underline')} onClick={() => editor.chain().focus().toggleUnderline().run()}>
        <UnderlineIcon height={18} width={18} />
      </EditorBubbleMenuButton>
      <EditorBubbleMenuButton active={editor.isActive('strike')} onClick={() => editor.chain().focus().toggleStrike().run()}>
        <StrikethroughIcon height={18} width={18} />
      </EditorBubbleMenuButton>
      <EditorBubbleMenuButton active={editor.isActive('code')} onClick={() => editor.chain().focus().toggleCode().run()}>
        <CodeIcon height={18} width={18} />
      </EditorBubbleMenuButton>
      <span className="border border-gray-100"></span>
      <EditorBubbleMenuLink editor={editor} />
      <EditorBubbleMenuTextAlign editor={editor} />
    </BubbleMenu>
  );
}

Tippy menu open:

Select open:

I've tried to set the container in the portal to the containerRef of the bubblemenu but this causes the same behaviour. I'm not sure what is causing this, a popover does work?

If I set the position to item-aligned I get the same result. Which is weird considering popover works?

Versions:

    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-select": "^2.0.0",
    "@tiptap/react": "^2.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

Update: just found out it does work when textAlignment = justify. Update 2: I think it has to do with rendering. I've been trying to optimize a lot in the components and it works very sporadically right now Update 3: The moment i click on it, for a split second it shows the menu on the right position, and then suddenly goes to the top Update 4: It seems to happen when editor from useEditor changes. I am currently using it in a context like this:

const editor = useEditor();

When i comment this out, it opens it on the right place but the tippy popup disappears. Update 5: when i put the root in a memo and the content's in there, the popup keeps the position but the tippy disappears

[mattlevine]

@arjendevos Did you ever figure out how to work around this. I'm running into the same thing. I did find that it seems to work when make the tippy.js tippy-content div position:relative. But it rebreaks with any update to the tiptap editor.

[mattlevine]

@arjendevos If you haven't made progress, check this out: https://github.com/ueberdosis/tiptap/discussions/4145#discussioncomment-6907839

[arjendevos]

@mattlevine i actually tried with the ref, but don't know if I tried it that way. Will test it soon!

[arjendevos]

@mattlevine tested it with a ref but it worked very sporadically. I'd say 80% of the time, it doesn't work.

[bernaferrari]

Novel lib solved this, I just don't remember how, but they did.