Problem with DropdownMenu in Tables

[matthiasbaldi]

Hi
I am new with Kobalte and try to use it in a small app.
So far everything was self explaining and simple to use. But I found an use case which is not so clear for me how I should use Kobalte components.
I have a dropdown component which I use outside of a table and inside of a <td> field in a table.
Outside of the table the component works as I expect it, inside of the table the trigger isn't "triggered" and it seems like the clicks are not coming through.

What do you think? Is this an issue how I use your components or is it an issue with the components or did I misunderstood something else?

Thank you.

Below an example of my code:

// table component

export function TableMeasurementPoint({ dataSet}: { dataSet: Data[] }) {
    return (
        <div>
            <h2 class='text-xl font-semibold'>table measurement point</h2>
            <table class='w-full text-sm text-left text-gray-500 dark:text-gray-400 shadow-xl'>
                <thead class='text-xs text-gray-400 uppercase bg-gray-50 dark:bg-gray-900 dark:text-gray-400'>
                    <tr>
                        {/*...*/}
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <For each={dataSet.data.items} fallback={[]}>
                        {(item) => (
                            <tr class='bg-white border-b dark:bg-gray-800 dark:border-gray-900 hover:bg-gray-50 dark:hover:bg-gray-600'>
                                {/*...*/}
                                <td>
                                    <MenuItemOptions></MenuItemOptions>
                                </td>
                            </tr>
                        )}
                    </For>
                </tbody>
            </table>
            <Show when={dataSet.loading}>loading...</Show>
        </div>
    );
}

// MenuItemOptions Component
export default function MenuItemOptions() {
    return (
        <DropdownMenu.Root>
            <DropdownMenu.Trigger class='button' title='Open menu options'>
                <DropdownMenu.Icon>
                    <RiSystemMoreFill class='inline' size={20} />
                </DropdownMenu.Icon>
            </DropdownMenu.Trigger>
            <DropdownMenu.Portal>
                <DropdownMenu.Content class='...'>
                    <DropdownMenu.Item class='...'>
                        <span>Delete</span>
                        <div class='inline'>
                            <RiSystemDeleteBinLine class='inline' size={20} />
                        </div>
                    </DropdownMenu.Item>
                </DropdownMenu.Content>
            </DropdownMenu.Portal>
        </DropdownMenu.Root>
    );
}

[fabien-ml]

Hi, is this the wanted behavior ? https://stackblitz.com/edit/kobalte-playground-janaka?file=src%2FApp.tsx

[matthiasbaldi]

Hi @fabien-ml
Thank you for your feedback and sorry for my late answer.
Yes that seems to work fine. I also built more or less the setup I use (with more components) and it still worked.
Now it could be that it has to be something with the reactivity based on my data loading or the fact that I already use solid-start instead of "blank" solidjs. Because when I set the data fixed (as a const array in the component) then it works again.

For clarification I add here a video from the behavior:

The upper button is outside of the table component and the lower button is inside a for-loop as you have it in your example.

For the icons I use the solid-icons lib, but this does not seem to be the issue.

I will give you a feedback here when I found a solution.

[matthiasbaldi]

As promised - an update:
I reimplemented the complete mini app with "plain" solidJS instead of solid-start and for the data fetching I used the createResource instead createRouteData. It is possible that I mixed something up in the app or there is somewhere an issue. Currently I am still not sure where the issue could be, because the data, as you can see in the gif above, is loaded and rendered in the table, but some components are broken.
But because of the working solidJS implementation I think that was and is not an issue with Kobalte. wdyt @fabien-ml ?