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.

Sign up for GitHub

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

Jump to bottom

Revert controlled components #4009

Merged
merged 2 commits into from
May 18, 2023
Merged

Revert controlled components #4009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f2865f
Revert "add delay by 1 microtick (#4005)"
JoviDeCroock May 18, 2023
0bd7836
revert controlled components
JoviDeCroock May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
57 changes: 0 additions & 57 deletions compat/src/render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,44 +87,12 @@ let oldEventHook = options.event;
options.event = e => {
if (oldEventHook) e = oldEventHook(e);

/** @type {ControlledTarget} */
const target = e.currentTarget;
const eventType = e.type;
if (
(eventType === 'input' || eventType === 'change') &&
target._isControlled
) {
// Note: We can't just send the event to the afterEvent function because
// some properties on the event (e.g. currentTarget) will be changed by the
// time afterEvent is called. `currentTarget` will be `null` at that point.
// The browser reuses event objects for event handlers and just modifies the
// relevant properties before invoking the next handler. So whenever we call
// afterEvent, if we were to inspect the original Event object, we would see
// that the currentTarget is null. So instead we pass the event type and the
// target to afterEvent.
Promise.resolve().then(() => afterEvent(eventType, target));
}

e.persist = empty;
e.isPropagationStopped = isPropagationStopped;
e.isDefaultPrevented = isDefaultPrevented;
return (e.nativeEvent = e);
};

/**
* @typedef {EventTarget & {value: any; checked: any; _isControlled: boolean; _prevValue: any}} ControlledTarget
* @param {string} eventType
* @param {ControlledTarget} target
*/
function afterEvent(eventType, target) {
if (target.value != null) {
Promise.resolve().then(() => (target.value = target._prevValue));
}
if (eventType === 'change' && target.checked != null) {
Promise.resolve().then(() => (target.checked = target._prevValue));
}
}

function empty() {}

function isPropagationStopped() {
Expand Down Expand Up @@ -278,33 +246,8 @@ options.diffed = function (vnode) {
oldDiffed(vnode);
}

const type = vnode.type;
const props = vnode.props;
const dom = vnode._dom;
const isControlled = dom && dom._isControlled;

if (
dom != null &&
(type === 'input' || type === 'textarea' || type === 'select')
) {
if (isControlled === false) {
} else if (
isControlled ||
props.oninput ||
props.onchange ||
props.onChange
) {
if (props.value != null) {
dom._isControlled = true;
dom._prevValue = props.value;
} else if (props.checked != null) {
dom._isControlled = true;
dom._prevValue = props.checked;
} else {
dom._isControlled = false;
}
}
}

if (
dom != null &&
Expand Down
216 changes: 0 additions & 216 deletions compat/test/browser/controlledInput.test.js
View file
Open in desktop

This file was deleted.

19 changes: 0 additions & 19 deletions demo/controlled-inputs.jsx
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions demo/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import SuspenseRouterBug from './suspense-router';
import NestedSuspenseBug from './nested-suspense';
import Contenteditable from './contenteditable';
import { MobXDemo } from './mobx';
import ControlledInputs from './controlled-inputs';

let isBenchmark = /(\/spiral|\/pythagoras|[#&]bench)/g.test(
window.location.href
Expand Down Expand Up @@ -136,9 +135,6 @@ class App extends Component {
<Link href="/contenteditable" activeClassName="active">
contenteditable
</Link>
<Link href="/controlled-inputs" activeClassName="active">
Controlled Inputs
</Link>
</nav>
</header>
<main>
Expand Down Expand Up @@ -169,7 +165,6 @@ class App extends Component {
<SuspenseRouterBug path="/suspense-router" />
<NestedSuspenseBug path="/nested-suspense" />
<Contenteditable path="/contenteditable" />
<ControlledInputs path="/controlled-inputs" />
</Router>
</main>
</div>
Expand Down