TreeTable: editor cell input doesn't go out of focus when it should in an NextJS AppRouter app #5689
Labels
Component: NextJS
NextJS related issue
Resolution: Stale
Issue or pull request is inactivity and unfortunately it will be *closed* if there is no response
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
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.
The text was updated successfully, but these errors were encountered: