search

TryGhost / Ghost

Independent technology for modern publishing, memberships, subscriptions and newsletters.
https://ghost.org
MIT License
47.4k stars 10.34k forks source link

Enter breaks navigation editor #21494

Open cathysarisky opened 4 days ago

cathysarisky commented 4 days ago

Issue Summary

Attempting to create a new navigation entry by pressing enter instead of clicking the green plus results in the new url being on the line below the new label. Setup: image Then press enter (with the focus on the url field): image

Pressing enter a second time triggers an error (makes sense) but also a render loop. image

I'm leaving the render loop here with the first bug, in hopes that fixing the enter error will result in resolution of the render loop.

Steps to Reproduce

Enter a label and url on the last line in the navigation editor.
Press return instead of the green plus.

(The render loop is a lot more obvious with console logging added to line 11 of NavigationEditForm.tsx)

Ghost Version

5.98 (Ghost pro)

Node.js Version

Ghost pro

How did you install Ghost?

Ghost Pro (also seen on dev setup)

Database type

MySQL 8

Browser & OS version

Chrome, Windows 10

Relevant log / error output

None for the enter bug (see images).  An enormous amount of console spam for added logging. :)

Code of Conduct

cathysarisky commented 3 days ago

This looks like a tricky react state bug of some sort. Having trouble putting my finger on it, but basically, setNewItem doesn't get called for changes in the URL field , only on blur. The enter key does not trigger the necessary saving of the url before a new row gets added. I think.