Problem with having a "form" inside of a "form"

[DanceParty]

First off, I am aware that no form should contain another form element, but I am unsure how to phrase this question differently...

Also I am quite new to remix and loving it, but I was unable to figure out how to approach this problem even after reading documentation and searching the other discussions.

The shortened version of my problem is such:

I have a form to submit a line item, and within that form, I have a "new category" input where the user should be able to add a new category on the fly (db call) by pressing "Enter". However, I am running into issues where pressing Enter either doesn't do anything (because I can add an event.preventDefault()) or submits the form by triggering the "submit" button at the end of the line item form.

My goal is that when the input is focused and the user presses enter, I can try submitting the new "Category" to the database. I am aware of the actionId trick but that seems to fit the problem where you have more than one form per component, but instead I have almost the reverse problem where one form with two actions(?)

I can try summarizing the code if that would be helpful too~

[MuzafferDede]

Instead of managing two distinct form submissions, consider detecting new category submissions within the existing form. By handling this within the action simply by checking if a new category field exists you can add the new category to the database and seamlessly proceed to add the new item.

[DanceParty]

I see this makes sense! Thanks for the response :)

[DanceParty]

Even though this will probably work, I am curious if there is a way to accomplish the original idea here and if so, how?