Add uncontrolled form to the nextjs example

[raoufswe]

◀️ Context:

In React, there are two ways to build forms:

• Controlling an input with a state variable
• Reading the input values when submitting a form

Our Next.js app already has a working example of the first approach, but we're missing implementation for the second approach—where users can access the form data upon submission similar to the Vanilla JS example we have here, so ideally we should fully test and support both ways.

🐛 Blocker

While trying to add the uncontrolled form example, I noticed that the React-wrapped version of our form components doesn't correctly attach/read the form element's value when the form is submitted, even though we're using the element-internals-polyfill.

The issue doesn’t happen when using the custom element directly in React or Vanilla JS so my rough assumption is the issue might be related to @lit/react

Screen.Recording.2024-10-28.at.17.30.02.mov

⏭️ Next step

Ensure the issue isn't from our side and reach out to the lit team if needed.