TreeTable: editor cell input doesn't go out of focus when it should in an NextJS AppRouter app

[iemi111]

Describe the bug

When using the cell editing feature in a NextJS AppRouter app, the input doesn't go out of focus the first time you click somewhere else, it goes out of focus on the second click.

In my private app that I'm working on, which is a lot more complex than the example here, if you were to click on another editable field, it doesn't go out of focus the second time, it just displays the field that you've clicked on and that goes on unless you double click on a place that's not a field, then all fields go out of focus and the display view is shown (body prop).

This is only happening when you use App Router, it works fine with Pages.

Reproducer

https://codesandbox.io/p/github/iemi111/Demo/main?file=%2F.codesandbox%2Ftasks.json%3A27%2C25&layout=%257B%2522sidebarPanel%2522%253A%2522GIT%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clr0fcowh0007356id4rd0304%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clr0fcowh0003356imtgq0f7k%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clr0fcowh0005356icd7dioa8%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clr0fcowh0006356iquwaymp4%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clr0fcowh0003356imtgq0f7k%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clr0fcowh0002356ijrmij0zd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A27%252C%2522startColumn%2522%253A25%252C%2522endLineNumber%2522%253A27%252C%2522endColumn%2522%253A25%257D%255D%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clr0fcowh0003356imtgq0f7k%2522%252C%2522activeTabId%2522%253A%2522clr0fcowh0002356ijrmij0zd%2522%257D%252C%2522clr0fcowh0006356iquwaymp4%2522%253A%257B%2522id%2522%253A%2522clr0fcowh0006356iquwaymp4%2522%252C%2522activeTabId%2522%253A%2522clr0i1fiw0087356i0qoh32b7%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A3001%252C%2522taskId%2522%253A%2522approuterversion%2522%252C%2522id%2522%253A%2522clr0i1fiw0087356i0qoh32b7%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A3000%252C%2522taskId%2522%253A%2522pagesversion%2522%252C%2522id%2522%253A%2522clr0i1i6u0098356irhqzppnx%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clr0fcowh0005356icd7dioa8%2522%253A%257B%2522id%2522%253A%2522clr0fcowh0005356icd7dioa8%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522approuterversion%2522%252C%2522id%2522%253A%2522clr0hx31r00bu356hm24q4b8g%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522pagesversion%2522%252C%2522id%2522%253A%2522clr0hx31s00bv356hhsg3dkkg%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clr0hx31s00bv356hhsg3dkkg%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

PrimeReact version

^10.2.1

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

1. Create NextJS App Router app
2. Add Tree Table component with cell editing feature
3. Click on an editable field
4. Click somewhere else

Expected behavior

Clicking anywhere else (another field, any other place on the page) should make the currently editable input field go out of focus and switch to the display mode of the field.

[kl-nevermore]

hi Can you test it with main branch Not sure has been fixed by #5674

[kl-nevermore]

Need Next v14 if use app router

[iemi111]

I'm using Nextjs 14