Skip to content

Commit 7d3f499

Browse files
authored
fix: remove obsolete textarea validation workaround (#9019)
1 parent 970f8a3 commit 7d3f499

File tree

2 files changed

+31
-20
lines changed

2 files changed

+31
-20
lines changed

packages/@react-aria/textfield/src/useTextField.ts

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,13 @@
1212

1313
import {AriaTextFieldProps} from '@react-types/textfield';
1414
import {DOMAttributes, ValidationResult} from '@react-types/shared';
15-
import {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils';
15+
import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
1616
import React, {
1717
ChangeEvent,
1818
HTMLAttributes,
1919
type JSX,
2020
LabelHTMLAttributes,
2121
RefObject,
22-
useEffect,
2322
useState
2423
} from 'react';
2524
import {useControlledState} from '@react-stately/utils';
@@ -147,24 +146,6 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
147146
useFormReset(ref, props.defaultValue ?? initialValue, setValue);
148147
useFormValidation(props, validationState, ref);
149148

150-
useEffect(() => {
151-
// This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
152-
// We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
153-
// which causes Chrome to skip validation. Only updating `value` is ok in our case since our
154-
// textareas are always controlled. React is planning on removing this synchronization in a
155-
// future major version.
156-
// https://github.com/facebook/react/issues/19474
157-
// https://github.com/facebook/react/issues/11896
158-
if (ref.current instanceof getOwnerWindow(ref.current).HTMLTextAreaElement) {
159-
let input = ref.current;
160-
Object.defineProperty(input, 'defaultValue', {
161-
get: () => input.value,
162-
set: () => {},
163-
configurable: true
164-
});
165-
}
166-
}, [ref]);
167-
168149
return {
169150
labelProps,
170151
inputProps: mergeProps(

packages/react-aria-components/test/TextField.test.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,5 +266,35 @@ describe('TextField', () => {
266266
let input = getByRole('textbox');
267267
expect(input).toHaveAttribute('form', 'test');
268268
});
269+
270+
if (parseInt(React.version, 10) >= 19) {
271+
it('resets to defaultValue when submitting form action', async () => {
272+
const Component = component;
273+
function Test() {
274+
const [value, formAction] = React.useActionState((_, formData) => formData.get('value'), 'initial');
275+
276+
return (
277+
<form action={formAction}>
278+
<TextField defaultValue={value} name="value">
279+
<Label>Value</Label>
280+
<Component data-testid="input" />
281+
</TextField>
282+
<input data-testid="submit" type="submit" />
283+
</form>
284+
);
285+
}
286+
287+
const {getByTestId} = render(<Test />);
288+
const input = getByTestId('input');
289+
expect(input).toHaveValue('initial');
290+
291+
await user.tab();
292+
await user.keyboard('Devon');
293+
294+
const button = getByTestId('submit');
295+
await user.click(button);
296+
expect(input).toHaveValue('Devon');
297+
});
298+
}
269299
});
270300
});

0 commit comments

Comments
 (0)