marmelab / marmelab/react-admin
`TextInput` component not handling events during the initial life cycles
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 26.9k
- Forks
- 5.5k
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 19
Description
## Some bit of context
We use `react-admin` version `4.16.9` in a `pnpm` monorepo workspace. And we have the automatic renovate pull requests to update our repository packages.
Our end to end tests were successful before updating to `react-hook-form` from `7.44.3` to `7.51.0` then it started to fail consistently. The failing test was related to `react-admin`'s logging in page.
#### Test is as follows (in this order):
- Cypress finds the `username` and `password` fields.
- Cypress starts typing in the corresponding credentials.
Assume the credentials are:
- `username`: `a-user`
- `password`: `what-a-password`
**What you were expecting:**
It was expected to fill in the `username` and `password` fields normally. But we noticed that the test was failing because the typed in username was `-user` (notice the missing `a`) but the password field was normal `what-a-password`.
**What happened instead:**
It was expected of course that the `username` and `password` to have `a-user` and `what-a-password` respectively.
**Steps to reproduce:**
You can check the reproduction code here [react-admin-delayed-sync](https://codesandbox.io/p/devbox/react-admin-delayed-sync-56pg7h).
If you change `react-hook-form` to `7.44.3` then you will see the sync works as expected
#### Version `7.44.3`
https://github.com/marmelab/react-admin/assets/29442110/9d568ab7-78d8-4035-9ae0-30105327c714
#### Version `7.50.1`
https://github.com/marmelab/react-admin/assets/29442110/034ad9a0-8300-4d86-b81e-ab16013b9746
Thus, we can notice that the issue is with the `TextInput` component not from the registered input component with `react-hook-form`.
**Related code:**
You can check the sandbox that I have created for this [react-admin-delayed-sync](https://codesandbox.io/p/devbox/react-admin-delayed-sync-56pg7h).
**Environment**
* React-admin version: ^4.16.10
* React version: 18.2.0
* React Hook Form version: 7.50.1
* Browser: Chrome
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked react-admin-delayed-sync reproduction and compare its behavior with react-hook-form 7.44.3 and 7.50.1. Trace the TextInput initialization and event handling shown by the reproduction, then verify that Cypress typing preserves the leading character in the username while the password remains correct.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100