marmelab / marmelab/react-admin

`TextInput` component not handling events during the initial life cycles

Open
#9,670 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

needs more info
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.