Comments (4)
Thanks for this report and the sandbox 🙏
However, tweaking the reproductible react-admin-sanbox by moving the document.querySelector('input[id="username-ra"]');
before the useEffect
solves the issue you describe.
const raInput = document.querySelector('input[id="username-ra"]'); // it works
useEffect(() => {
...
Knowing that the React way to get an element is to use useRef
, I wonder if using document.querySelector
instead of a ref
could cause this issue (although for now , <TextInput>
does not propagate to ref
). 🤔
All things considered, for me this use case is unreliable to properly investigate and qualify this issue.
May you consider providing a project repository using the Cypress tests which lead to the issue you describe? Thanks
from react-admin.
@adguernier you're absolutely correct, but I am not sure how did you make it work with a ref
, that's definitely the first thing I have tried, so I had to hack it in somehow with the document.querySelector
. I even tried with inputRef
and it didn't work. Check the console.log()
in the upcoming screenshot. But yeah if you only tried it with the document.querySelector
then it's the same case.
And this is probably because of the useInput
used in the component replaces the ref
coming from the props and put in the ref
coming in from react-hook-form
hook. This could be solved by a merging of ref
s or something!
Note That!
And also regarding moving the document.querySelector
line outside of the useEffect
, it defies the purpose of this test, because the issue here is about handling events during the very initial life cycles. If you simply move it up one level then you will start typing exactly one event later, this case is when the return of the query selector becomes available but the useEffect
diff didn't yet get the new value. But by putting in the querySelector
in the useEffect
it's a dynamic fetch (kinda).
Please have a look at the screen shots attached below.
Inside useEffect |
Outside useEffect |
---|---|
Started typing at 2! |
Started typing at 3!! |
So I believe the issue is not about the retrieval of the component but rather the logic being handled inside the TextInput
that receives the very first events from the browser but does not handle them properly!
Thanks for looking into this! And happy to help out!
from react-admin.
Thanks for your report and the reproduction, which allows us to dig further.
After further inspection, it seems that the problem isn't linked to the onChange
handler, which works fine in react-admin's TextInput, but to a reset of the form values on mount (or shortly after)
I tested it as follows:
- Open the CodeSandbox in full page (https://56pg7h-5173.csb.app/)
- Open the devtools, and find react-admin'
useInput
in the sources panel - Add a breakpoint in useInput's
onChange
handler - Refresh the screen
Initially, all 3 inputs have the first letter typed in ('a'), but after going one step further, the first 2 inputs have the correct value ('a-') but the third one only has '-'. This tends to show that react-admin resets the form a bit too late.
React-admin's Form
sets the form default value based on the current RecordContext. The last time we've touched this mechanism is in #8911, nine months ago, and it was released in 4.11.0. There is no react-admin reason why it used to work on your side with a react-admin version > 4.11 and then stopped working.
So I tend to think it's a react-hook-form regression. To properly test it, you should set default values in your standalone RHF input.
Also, this makes me think that it doesn't make sense to use react-admin's Form
in LoginForm
instead of react-hook-form directly. We need none of the boilerplate of the Form
component, which is designed with the use case of record forms.
from react-admin.
@fzaninotto But this (LoginForm
) is a black box to us, we don't have access to the LoginForm
provided from react-admin
and we'd like to keep using the built in form, without overriding the loginPage
prop passed to the AdminUI
wrapper, we just use it as it is.
Will this be handled from react-admin's side to simplify the LoginForm
usage as you mentioned in an upcoming version?
from react-admin.
Related Issues (20)
- Change title property type in core display components <Edit>, <Show>, <View> HOT 1
- Standalone version of the Store for a dual-store strategy HOT 3
- Unable to clear default value in DateTimeInput component HOT 3
- Documented theme level defaultProps overrides do not work for react admin components HOT 4
- Reference Array selected item from a filter query vanishes immediately after selection. HOT 2
- Infinite re-rendering using disabled AutocompleteArrayInput in a ReferenceArrayInput HOT 6
- AutocompleteInput don't keep focus with mouse HOT 5
- Documentation update in sample. HOT 3
- NumberInput's `onBlur` prop does not provide an event object HOT 2
- Add ability to customize query string format for lists HOT 5
- i want to show the received gmail in react js app
- AutoComplete choice listing issue when using useChoicesContext HOT 1
- react admin error with Menu.Item missing properties HOT 6
- storeKey prop is not passed to useRecordSelection hook inside useListController HOT 5
- useEditContext returns null for both values HOT 5
- Infinite loop occurs in page rendering when perPage is set to a negative number in List Component HOT 2
- Codemods are not included in ra-core v5
- Duplicate entries in documentation search HOT 2
- `<PasswordInput/>` or `<TextInput/>` has corrupted `validate` prop, if field is handled with `disabled` prop HOT 4
- Auth provider login Promise rejection with "message" doesn't trigger notification message HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-admin.