Attach <Dropdown.Content /> to a dynamically rendered element

[sndp-s]

I need to be able to attach my <DropdownMenu.Content /> to a dynamically rendered element. (an @mention text rendered in a <span/> in a (doist-typist) rich text editor).

Right now I have two ways to position the <DropdownMenu.Content/> of my <Dropdown />

1. <DropdownMenu.Trigger/> (<DropdownMenu.Content/> gets placed around it)

2. <DropdownMenu.Portal/> (Portals the <DropdownMenu.Content/> to the element specified in the 'container' prop)

Approach 1.

DropdownMenu.js

<DropdownMenu.Root>
    <DropdownMenu.Trigger />
    <DropdownMenu.Portal>
        <DropdownMenu.Content>
            <MenuItem1/>
            <MenuItem2/>
            <MenuItem3/>
        </DropdownMenu.Content>
    </DropdownMenu.Portal>
</DropdownMenu.Root>

I see the problem with my code here, The Trigger is in <DropdownMenu /> while it is supposed to be at the <span>@</span> but can I accompolish this? (by wrapping my editor in the <DropdownMenu.Root> ? but then again how will I attach the <DropdownMenu..Trigger />) to the <span>@</span>?

Approach 2.

I get a prop called decorationNode (its the @mention node, <span>@<span/> I talked about in the previous point) in my <DropdownMenu /> component. I use this as the value container prop of the <DropdownMenu.Portal> and this almost work

Here is the result:

it is almost good in that it is rendered around the correct element but then again it has become a part of the editor and not something attached to it.

Both of these don't seem to fit my use case. Is there an other to accomplish this?

[joaom00]

I think a Dropdown isn't the right component for you usecase. Maybe Popover with Popover.Anchor.

[sndp-s]

I think a Dropdown isn't the right component for you usecase. Maybe Popover with Popover.Anchor.

That does seem like it but then again I need to wrap the Popover.Anchor around @mention 's <span>@</span> which is the part I am unable to figure out. Any idea on that?

[benoitgrelard]

Yeah it looks like you're after some kind of combobox/autocomplete component which we currently don't have.
Ariakit has an example close to that using their combobox hooks: https://ariakit.org/examples/combobox-textarea

[joaom00]

Is possible to use Popover to build something like the ariakit example? I mean, the Popover.Content position relative to the position of the caret in input? without the autocomplete stuff

[benoitgrelard]

It might be possible, although I'm not sure of the accessibility impact given that it's not directly made for that pattern.

[joaom00]

I was thinking of building the ariakit example but using radix + cmdk because has API similar to radix

[sndp-s]

Thanks