context drop-down menu

[hamed-musallam]

@targos

I took a look at the context drop-down menu, it seems you design it for general use so we do not know anything about the element that the context menu opens over it.

let's assume I need to use it over a list or table I need to get the id or any other kind of data to use it once I press on the menu to do whatever I want.

maybe we could have a custom attributes data-context = ""

[targos]

I don't understand your problem. @stropitek ?

[hamed-musallam]

for example, we have a table displaying a list of spectra and I need to do an operation in one of the spectra so to do that I right-click on the row and open a context menu. How I can pass the id of the spectrum to the context menu?

[targos]

The way I would implement it is that each row of the table uses its own DropdownMenu. In that case you already have that information where you render the menu so that should be fine.

[hamed-musallam]

Do see it is better than having custom attributes per row and using DropdownMenu for the whole table?

[targos]

I don't really see any advantage of having a single menu for the whole table.

[hamed-musallam]

@targos

Thanks, Michael, can you expose the MenuOptions ?

[hamed-musallam]

I don't really see any advantage of having a single menu for the whole table.

But I think there is an advantage, we have a single drop-down context instead of having a drop-down menu in each table cell.

[targos]

That's a fact. But how is it an advantage?

[hamed-musallam]

I tested it per table header <th> , you can see the result

That's a fact. But how is it an advantage?

just I mean we do not have to wrap the dropdown menu in each cell, nothing more

[hamed-musallam]

I tested it per table header <th> , you can see the result

That's a fact. But how is it an advantage?

just I mean we do not have to wrap the dropdown menu in each cell, nothing more

@targos

this happen because i need to set /* overflow: hidden; */ to ellipses the header

[hamed-musallam]

@targos

I think the menu should be injected at the level of the table to avoid these style problem

[targos]

No, we should be using a Portal

[hamed-musallam]

But you are using a Portal

react-science/src/components/dropdown-menu/DropdownMenu.tsx

Lines 119 to 132 in 086f0b8

	<Portal>
	<div ref={ref}>
	<div ref={setPopperElement} {...popperProps}>
	<MenuItems
	itemsStatic
	onSelect={(selected) => {
	closeItems();
	onSelect(selected);
	}}
	{...otherProps}
	/>
	</div>
	</div>
	</Portal>

[hamed-musallam]

@targos

I think the menu should be injected at the level of the table to avoid these style problem

@targos but we have the menu inside the th as you can see??? and we have RootLayout as the root of the nodes tree, Is the wrong in how i use the component

[targos]

I don't know exactly, but there's definitely something wrong somewhere. If you could reproduce it in a story in this repo that would be perfect.

[hamed-musallam]

@targos

i found the problem it is here

react-science/src/components/dropdown-menu/DropdownMenu.tsx

Lines 44 to 46 in 086f0b8

	if (trigger === 'contextMenu') {
	return <DropdownContextMenu {...otherProps} />;
	}

[targos]

What's the problem?

[hamed-musallam]

@targos
you are not using the Portal if the trigger== "contextMenu" but if its value click you use it and it works well as expected

check DropdownContextMenu component

[targos]

Could you make a fix (and a story that demonstrates it)?

[hamed-musallam]

@targos

can you check the PR #444

[targos]

Fixed in v0.20.0. Thanks for the PR.