Bug: The placeholder is shown on top of the input value. about react

[gkienhuis]

See https://chromium-review.googlesource.com/c/chromium/src/+/4329778

[mrb1nary]

I guess it's a canary bug
(Left: Edge | Right: Canary)

[lazybean]

I'm not sure this is a react bug or a chrome canary bug.
But because I cannot repro with simple html I decided to open issue here first.

[KrishKuChhabra]

import "./styles.css";
import React, { useState } from "react";
export default function App() {
const [value, setValue] = useState("");
return (

Hello CodeSandbox

Start editing to see some magic happen!

  <input
    onChange={(e) => setValue(e.target.value)}
    type="text"
    placeholder="Enter your name"
    value={value}
  />
</div>

);
}

[sunsations]

I have the same issue:

opening https://codesandbox.io/s/chrome-canary-placeholder-bug-ez4je3?file=/src/App.js

[stefcameron]

I'm not sure this is a react bug or a chrome canary bug.
But because I cannot repro with simple html I decided to open issue here first.

Not a React bug. Plain HTML has the same issue. Seems to be Canary-specific.

<input placeholder="This is the placeholder" value="foobar" />

I see this in Canary Version 113.0.5629.0 (Official Build) canary (arm64), but I don't see it on Chrome Version 110.0.5481.177 (Official Build) (arm64) and FireFox 110.0 (64-bit). All these checks were done on on macOS 13.2.1 (22D68).