DataTable: editMode="cell" and Dropdown z-Index issue

[CRC32EX]

Describe the bug

Required editMode="cell" and Dropdown to have appendTo="self"

https://stackblitz.com/edit/vitejs-vite-l8d3y6?file=src%2FApp.tsx

A

Dropdown disappear when scroll

B (resizableColumns)

Dropdown disappear all times

Reproducer

A

https://stackblitz.com/edit/vitejs-vite-aobqhu?file=src%2FApp.tsx

B (resizableColumns)

https://stackblitz.com/edit/vitejs-vite-dja1u6?file=src%2FApp.tsx

PrimeReact version

10.0.9

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome Latest(119.0.6045.124)

Steps to reproduce the behavior

No response

Expected behavior

No response

Ref

#2666

[artimath]

I was able to finally resolve by add overflow visible to the datatable wrapper via passthrough.

<DataTable
        pt={{ wrapper: { style: { overflow: "visible" } } }}
        value={normalizedData}
        tableStyle={{ minWidth: "3rem" }}
        paginator
        paginatorClassName="z-0 relative"
        showGridlines

[melloware]

Thanks. Marked your solution as a good workaround

[CRC32EX]

This CSS is not solution.
paginator horizontal scroll is disabled by overflow: "visible".

In addition, B (resizableColumns) have still same problem.
Can't solve with This CSS.

@melloware Re-open this issues please.

[melloware]

It looks like @artimath also adds "relative" to the paginatorClassName I assumed that was to handle the paginator issue?

[CRC32EX]

z-0 and relative is not defined by default.
it's self defined by @artimath.
Please tell me z-0 and relative CSS @artimath

I can't use pt attribute stackblitz.com. (I don't know why)
So I take a video.
https://github.com/primefaces/primereact/assets/25629617/590691ac-72ef-419c-b61a-2a23858b6202

[melloware]

@CRC32EX here is my working StackBlitz: https://stackblitz.com/edit/vitejs-vite-d3su4k?file=src%2FApp.tsx

[CRC32EX]

@melloware Thank you.
I add reproducer.

scrollable not working

Reproducer

• Current beahvior
  Invalid width. scrollbar disappear.
  

• Expected behavior
  

resizableColumns not working

Reproducer

• Current behavior
  

• Expected behavior
  

[melloware]

I guess the question is why do you want the dropdown to stay open when they scroll the page? According to ARIA standard when you are using the scrollbar of the page the dropdown should close as you are "no longer interacting with the dropdown"????

So to me its the correct behavior?

[CRC32EX]

Are you talking about this GIF?
I want choose group3 but I can't see it.
I have to scroll down.

[melloware]

OK but just remove appendTo="self" See: https://stackblitz.com/edit/vitejs-vite-nuvmev?file=src%2FApp.tsx its trapping it INSIDE the table.

Does that not work for you?

[CRC32EX]

I have to add appendTo="self"
Because of this #2666

[melloware]

But my reproducer is working fine. it lets you select the proper dropdown item? Can you please try my reproducer and tell me what is not working? It doesn't need #2666 ?

[CRC32EX]

But my reproducer is working fine.

Yes it's working

But, I'm fixed code.
This case not working.
I have to add appendTo="self"

https://stackblitz.com/edit/vitejs-vite-l8d3y6?file=src%2FApp.tsx

When i add appendTo="self" then, design is broken.

[melloware]

By why do you need appendTo="self" when I don't need that in my reproducer is my question?

[CRC32EX]

Your reproducer is not implemented cell editor.
So, I implement cell editor to your code.
This is code diff.
https://gist.github.com/CRC32EX/1ea1febe8d3a0461296eb0060c74726a/revisions

editMode="cell" has Dropdown bug.
According to this issue #2666, WORKAROUND is add appendTo="self"
So, I have to add appendTo="self"

This issues is reproducable with uncomment App.tsx line 28 appendTo="self"
https://stackblitz.com/edit/vitejs-vite-l8d3y6?file=src%2FApp.tsx

[melloware]

@CRC32EX then I guess I am unclear why editMode="cell" was not in your original reproducer? When that is the real bug?

[CRC32EX]

I provided trimmed code for readable.
I thought it is reproducable, but it is not.

This is my fault, I'm sorry.

I'm should not have do that.
When I found other issues, l will provide full code, with out trim.

[melloware]

OK re-opened and I updated the details.

[melloware]

Fixed for next release so you will be able to remove append and it will just work properly.