Error in onBlur Event Handling for EditableText Component

[talentlessDeveloper]

The EditableText component is currently experiencing an error when handling the onBlur event. The intended functionality is for the onBlur event to trigger fetcher.submit, but instead, it produces the following error message: "Uncaught Error: Cannot submit element that is not <form>, <button>, or <input type='submit|image'>" in the console. Additionally, fetcher.submit does not trigger unless the user presses the Enter key after typing.

Observations:

• The use of event.currentTarget selects the input field rather than the form, potentially causing the error.
• While the onBlur event is meant to trigger fetcher.submit under certain conditions, the current implementation fails to do so.
• The error message indicates that the element being submitted does not meet the required criteria of <form>, <button>, or <input type='submit|image'>.
• Notably, the onSubmit functionality works as expected when the user presses Enter after typing.

Code Snippet:

onBlur={(event) => {
  if (
    inputRef.current?.value !== value &&
    inputRef.current?.value.trim() !== ""
  ) {
    fetcher.submit(event.currentTarget);
  }
  setEdit(false);
}}

Proposed Solution:

onBlur={(event) => {
  if (
    inputRef.current?.value !== value &&
    inputRef.current?.value.trim() !== ""
  ) {
    fetcher.submit(event.currentTarget.parentElement as HTMLFormElement);
  }
  setEdit(false);
}}

Note: I'm uncertain if the current behavior aligns with the intended use of the component. I'm still learning and would appreciate clarification on whether this behavior is intentional. If it's not can I create a PR?

[esvikesvik]

fetcher.submit(event.currentTarget.form);