qwikifiers / qwik-ui

Qwik's Headless and styled component library
https://qwikui.com
MIT License
626 stars 140 forks source link

[✨] Make Popover work without using a div #961

Open imMadsen opened 1 month ago

imMadsen commented 1 month ago

Is your feature request related to a problem?

The issue is when using a Popover for a Context Menu in a table, the Popover.Root element wraps the contents in a div. Essentially making it unusable for tables. Maybe my examples below can help clarify the issue

Example

<table>
    <Popover.Root>
        <tr>
            <td>John Doe</td>
        </tr>
        <Popover.Panel id="my cool menu">
        </Popover.Panel>    
    </Popover.Root>
</table> 

Example (Rendered)

<table>
    <div>
        <tr>
            <td>John Doe</td>
        </tr>
        <div id="my-cool-ctx-menu">
        </div>
    </div>
</table> 

Describe the solution you'd like

Dream Scenario (Rendered)

<table>
    <tr>
       <td>John Doe</td>
       <div id="my-cool-ctx-menu">
       <div>    
    </tr>
</table> 

Describe alternatives you've considered

Maybe use a Polymorphic components like described in the Qwik Documentation here, or maybe one could use a fragment (I assume this is not done cause of some dom requirements stuff)

Additional context

No response

thejackshelton commented 1 month ago

The popover does need to be on a dom element.

The problem with polymorphism is the TypeScript server gets way too slow once you get past four possible elements, that is if you want it to be typed to the table props immediately after doing as="div".

At least with what I've tried. If you'd like to take a stab at it happy to help get you started with the research I've done so far.

Also a question, what use case would you have for a table row that pops over a table element? Why not have the table element inside the popover? Why is the popup needed? Maybe a modal would be better suited for this?