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

[lazybean]

React version: 18.2.0 18.3.xxx

Steps To Reproduce

1. On chrome canary, go to https://codesandbox.io/s/chrome-canary-placeholder-bug-ez4je3?file=/src/App.js
2. The placeholder is shown on top of the input value. 😱

3. If you focus the input, the placeholder disappears. 👍

Link to code example:
https://codesandbox.io/s/chrome-canary-placeholder-bug-ez4je3?file=/src/App.js

The current behavior

The placeholder is shown on top of the input value.

The expected behavior

The placeholder is not shown.

[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.

[Krishkumarchhabra25]

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

[mrb1nary]

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

[gkienhuis]

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

[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).

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!