Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

input type=checkbox cannot be a controlled component? #2714

Open
mischnic opened this issue Aug 24, 2020 · 5 comments
Open

input type=checkbox cannot be a controlled component? #2714

mischnic opened this issue Aug 24, 2020 · 5 comments
Labels
compat duplicate known issue The issue is known and may be left as-is.

Comments

@mischnic
Copy link

mischnic commented Aug 24, 2020

Reproduction

With this example, React creates a controlled input while Preact creates a uncontrolled input.

import React from "preact/compat";

function App() {
	return <input type="checkbox" checked={true} />;
}

In fact, I can't figure out how to make a controlled checkbox at all.

Not sure if this is a duplicate of #2625 or #1899

Steps to reproduce

https://codesandbox.io/s/preact-input-uncontrolled-qis0i

Click on the checkbox

Expected Behavior

Clicking on the checkbox shouldn't change its state (= what React does).

Actual Behavior

The checkbox can be toggled. checked={true} is essentially ignored.

@developit
Copy link
Member

Probably considered a duplicate of #1899. We should be patching this in compat, in core the recommendation is to use an event that either produces a render or to use preventDefault() since that's the standard approach to implementing input prevention in the DOM:

function App() {
	return <input type="checkbox" checked={true} onClick={(e) => e.preventDefault()} />;
}

@developit developit added duplicate known issue The issue is known and may be left as-is. compat labels Aug 27, 2020
@imrishabh18
Copy link

@developit Is this issue still relevant? Can I work on this?

@eusahn
Copy link

eusahn commented Mar 31, 2023

Another sandbox
https://codesandbox.io/s/frosty-rui-xh84ms?file=/src/index.js

Still not fixed it seems like.

@mayerraphael
Copy link

mayerraphael commented Sep 4, 2023

Controlled does not seem to work at all.

Using <input type="text" with value and still can change the value.

https://codesandbox.io/s/gifted-cerf-5pdrdw

@rschristian
Copy link
Member

Some context & workarounds: #3851 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
compat duplicate known issue The issue is known and may be left as-is.
Projects
None yet
Development

No branches or pull requests

6 participants