diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts index e232514d052..18f2942a90c 100644 --- a/packages/@react-aria/textfield/src/useTextField.ts +++ b/packages/@react-aria/textfield/src/useTextField.ts @@ -12,14 +12,13 @@ import {AriaTextFieldProps} from '@react-types/textfield'; import {DOMAttributes, ValidationResult} from '@react-types/shared'; -import {filterDOMProps, getOwnerWindow, mergeProps, useFormReset} from '@react-aria/utils'; +import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils'; import React, { ChangeEvent, HTMLAttributes, type JSX, LabelHTMLAttributes, RefObject, - useEffect, useState } from 'react'; import {useControlledState} from '@react-stately/utils'; @@ -147,24 +146,6 @@ export function useTextField { - // This works around a React/Chrome bug that prevents textarea elements from validating when controlled. - // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes, - // which causes Chrome to skip validation. Only updating `value` is ok in our case since our - // textareas are always controlled. React is planning on removing this synchronization in a - // future major version. - // https://github.com/facebook/react/issues/19474 - // https://github.com/facebook/react/issues/11896 - if (ref.current instanceof getOwnerWindow(ref.current).HTMLTextAreaElement) { - let input = ref.current; - Object.defineProperty(input, 'defaultValue', { - get: () => input.value, - set: () => {}, - configurable: true - }); - } - }, [ref]); - return { labelProps, inputProps: mergeProps( diff --git a/packages/react-aria-components/test/TextField.test.js b/packages/react-aria-components/test/TextField.test.js index a5d354ee4c7..b89e35f82b1 100644 --- a/packages/react-aria-components/test/TextField.test.js +++ b/packages/react-aria-components/test/TextField.test.js @@ -266,5 +266,35 @@ describe('TextField', () => { let input = getByRole('textbox'); expect(input).toHaveAttribute('form', 'test'); }); + + if (parseInt(React.version, 10) >= 19) { + it('resets to defaultValue when submitting form action', async () => { + const Component = component; + function Test() { + const [value, formAction] = React.useActionState((_, formData) => formData.get('value'), 'initial'); + + return ( +
+ + + + + +
+ ); + } + + const {getByTestId} = render(); + const input = getByTestId('input'); + expect(input).toHaveValue('initial'); + + await user.tab(); + await user.keyboard('Devon'); + + const button = getByTestId('submit'); + await user.click(button); + expect(input).toHaveValue('Devon'); + }); + } }); });