Next.js a <select> with a list of <option> components resetting its value when the form is submitted

[benibangun]

In chapter 14 (Improving Accessibility) there is a strange behavior for select with a list of option components.

The select element's value is not persisting after submitting the form even though the value of formData.customerId is persisting.

After click button "submit", the form rerenders and the console.log(formData.customerId) logs the correct value (a UUID represeting the customer) , but the select element still resets to "nothing".

Link to the code that reproduces this issue https://nextjs.org/learn/dashboard-app.

To Reproduce

1. Start the app by running pnpm run dev
2. Open the app in the browser at http://localhost:3000/dashboard/invoices/create
3. Choose a customer, fill in an amount and click the submit button
4. Result: the Choose customer option go back to "Select a customer" and the amount is empty after submit. All input is lost.

Current vs. Expected behavior I expect the form to contain the original data, since I am not resetting the form or redirecting. This is important in case of form validation errors (which I didn't include to keep the code simple).

Before submit:

After submit:

The issue has been raise at StackOverflow on this link https://stackoverflow.com/questions/79386275/next-js-controlled-select-element-resetting-its-value-when-the-form-is-submitt.

But no one has answered since then.

I have been search and try to find the solution but still no result.

Is there any solution on this ?