Submitting change with enter refreshes the entire page without saving the change

[parkdoeui]

https://user-images.githubusercontent.com/59836949/191584174-a5a8b3bf-703b-470d-b6cc-6e7b32824394.mov
Seems like the input bar refreshes the page when the input change is made by keyboard. preventDefault() might fix the problem.

[geoerika]

It doesn't happen on the Widget Studio side though. But I can add this change. Have you tested it yourself?

Screen.Recording.2022-09-26.at.10.08.24.AM.mov

[geoerika]

@DoParkEQ Textfield component for Title already has a preventDefault() applied:

  <TextField
              autoFocus
              size='lg'
              value={tentativeTitle}
              onChange={(v) => setTentativeTitle(v)}
              onSubmit={(e) => {
                e.nativeEvent.preventDefault()
                e.nativeEvent.stopPropagation()
              }}
              onBlur={(e) => {
                updateTitle(e.target.value)
                setTentativeTitle(title)
                setEditing(false)
              }}
            />

The editor in snoke-dashboard worked perfectly before you changed the entire editing process.

[parkdoeui]

Screen.Recording.2022-09-29.at.12.36.27.PM.mov

@geoerika @kc-leung I am quite certain that it is the component issue. Replacing lumen-labs <TextField/> with vanila input does not reproduce page refresh on dashboard side.

Asides from it, since the input element's value update relies on <form>, I don't think this should be a controlled component. Consider defaultValue and take out onChange handler.