Bug: <option> elements have a duplicate selected attribute, resulting in HTML validation errors

[Aleksandr Hovhannisyan]

Description

When using next-plugin-preact, <option> elements are given a duplicate selected attribute in the document source, resulting in HTML validation errors when run through a tool like https://validator.w3.org/.

Steps to reproduce

1. CodeSandbox demo: https://codesandbox.io/s/nextjs-swr-preact-forked-fmojde?file=/pages/index.js.
2. Navigate to the URL directly: https://fmojde.sse.codesandbox.io/.
3. View page source (e.g., Ctrl+U on Windows).
4. Search for selected.
5. Observe this HTML: <option selected value="b" selected>b</option>.
6. Visit https://validator.w3.org/nu/?doc=https%3A%2F%2Ffmojde.sse.codesandbox.io%2F to view the validation report. Observe that one of the errors is: Duplicate attribute selected.

The source code for the repro sandbox is very simple:

const values = ["a", "b", "c"];

export default function Home() {
  return (
    <label>
      Pick a value
      <select defaultValue={values[1]}>
        {values.map((value) => (
          <option key={value} value={value}>
            {value}
          </option>
        ))}
      </select>
    </label>
  );
}

Environment

• Nextjs version: 12.1.4
• Plugin version: 3.0.6

Additional context

• Not observed without the Preact plugin/on a fresh Next.js install.
• SSR/SSG doesn't make a difference.
• Observed on Next 12. Haven't tested versions < 12.

[Aleksandr Hovhannisyan]

This may actually be a preact-render-to-string issue. Similar bug reported here: preactjs/preact-render-to-string#208