Skip to content

Refactor some controlled component stuff #26573

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

Merged
sebmarkbage merged 14 commits into from
Apr 9, 2023
Merged

Refactor some controlled component stuff #26573

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
087f5e9
Rename controlled component methods
sebmarkbage Apr 7, 2023
f57beb1
Use nullish checks instead of hasOwnProperty which is generally our s…
sebmarkbage Apr 7, 2023
0e0af20
Move init and postInit together to show that this doesn't matter
sebmarkbage Apr 7, 2023
0c9c688
Move checkControlledValueProps to ReactDOMComponent
sebmarkbage Apr 7, 2023
e6f26c3
Fix tests
sebmarkbage Apr 8, 2023
a0a47e5
setDefaultValue is always guarded by a null check
sebmarkbage Apr 9, 2023
1ad8392
Since we just initialized the initial state, we can infer it from the…
sebmarkbage Apr 9, 2023
17abdbe
Move controlled warning to be done by last/next props
sebmarkbage Apr 9, 2023
b3e97c5
Delete wrapperState
sebmarkbage Apr 9, 2023
63b40e5
Textarea only initializes the wrapper state to read it at the same time
sebmarkbage Apr 9, 2023
18a5a9f
Remove wrapperState from select
sebmarkbage Apr 9, 2023
2019ddc
Delete value attribute when defaultValue sets back to null/missing
sebmarkbage Apr 9, 2023
b263fa3
Reset textarea to empty after defaultValue is removed or null
sebmarkbage Apr 9, 2023
91f7014
Rename initX to validateXProps and postInitX to initX
sebmarkbage Apr 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 6 additions & 34 deletions packages/react-dom-bindings/src/client/ReactDOMInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,6 @@ import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';

import type {ToStringValue} from './ToStringValue';

export type InputWithWrapperState = HTMLInputElement & {
_wrapperState: {
initialValue: ToStringValue,
initialChecked: ?boolean,
controlled?: boolean,
...
},
checked: boolean,
value: string,
defaultChecked: boolean,
defaultValue: string,
...
};

let didWarnValueDefaultValue = false;
let didWarnCheckedDefaultChecked = false;

Expand Down Expand Up @@ -93,32 +79,18 @@ export function initInput(element: Element, props: Object) {
didWarnValueDefaultValue = true;
}
}

const node = ((element: any): InputWithWrapperState);
const defaultValue = props.defaultValue == null ? '' : props.defaultValue;
const initialChecked =
props.checked != null ? props.checked : props.defaultChecked;
node._wrapperState = {
Copy link
Collaborator

@sophiebits sophiebits Apr 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

initialChecked:
typeof initialChecked !== 'function' &&
typeof initialChecked !== 'symbol' &&
!!initialChecked,
initialValue: getToStringValue(
props.value != null ? props.value : defaultValue,
),
};
}

export function updateInputChecked(element: Element, props: Object) {
const node = ((element: any): InputWithWrapperState);
const node: HTMLInputElement = (element: any);
const checked = props.checked;
if (checked != null) {
node.checked = checked;
}
}

export function updateInput(element: Element, props: Object) {
const node = ((element: any): InputWithWrapperState);
const node: HTMLInputElement = (element: any);

updateInputChecked(element, props);

Expand Down Expand Up @@ -189,7 +161,7 @@ export function postInitInput(
props: Object,
isHydrating: boolean,
) {
const node = ((element: any): InputWithWrapperState);
const node: HTMLInputElement = (element: any);

if (props.value != null || props.defaultValue != null) {
const type = props.type;
Expand Down Expand Up @@ -309,12 +281,12 @@ export function postInitInput(
}

export function restoreControlledInputState(element: Element, props: Object) {
const node = ((element: any): InputWithWrapperState);
const node: HTMLInputElement = (element: any);
updateInput(node, props);
updateNamedCousins(node, props);
}

function updateNamedCousins(rootNode: InputWithWrapperState, props: any) {
function updateNamedCousins(rootNode: HTMLInputElement, props: any) {
const name = props.name;
if (props.type === 'radio' && name != null) {
let queryRoot: Element = rootNode;
Expand Down Expand Up @@ -376,7 +348,7 @@ function updateNamedCousins(rootNode: InputWithWrapperState, props: any) {
//
// https://github.com/facebook/react/issues/7253
export function setDefaultValue(
node: InputWithWrapperState,
node: HTMLInputElement,
type: ?string,
value: ToStringValue,
) {
Expand Down