Fix autoFocus on InputField #75
Conversation
SjaakSchilperoort
force-pushed
the
bugfix/fix-auto-focus-on-input-field
branch
from
3494f6a to
b87d488
Compare
src/components/InputField.tsx
Outdated
| autoCapitalize="none" | ||
| onFocus={() => setIsFocused(true)} | ||
| onBlur={() => setIsFocused(false)} | ||
| onLayout={() => { |
There was a problem hiding this comment.
Blijkbaar (maar kan er geen reports van vinden) kan autoFocus worden uitgevoerd als de component is gemount, maar nog niet attached. In Fabric is de timing van deze events anders. De fix hier is om een expliciete focus te doen op een moment dat we weten dat het ook werkt. Gebeurt eenmalig na mount.
Dit fixt het gedrag van Observation op React Native 0.83.
There was a problem hiding this comment.
Ik heb hier eerder ook wel een last van gehad, dit lijkt me een goede oplossing. Waarom heb je requestAnimationFrame nodig? (copilot zette hem ook voor mij er neer toen ik iets anders probeerde 😄 )
Het werkt nog niet helemaal lekker overigens. Het lijkt erop dat ie soort van onthoudt wat je hebt gedaan.
Als ik vanuit het AddObservationScreen naar het SelectSpeciesScreen ga (en heen en weer), werkt 't goed, maar als ik 1x het keyboard sluit komt het scherm niet meer terug als ik heen en weer ga.
Screen.Recording.2025-12-18.at.10.21.46.mov
There was a problem hiding this comment.
Ah ref={inputRef} mist nog, dat verklaart mijn bug ook wel een beetje.
There was a problem hiding this comment.
Ah
ref={inputRef}mist nog, dat verklaart mijn bug ook wel een beetje.
Beetje suf, toegevoegd.
There was a problem hiding this comment.
Waarom heb je
requestAnimationFramenodig?
Het onLayout event zelf kan nog steeds op een verkeerd moment komen. De callback in requestAnimationFrame wordt aangeroepen na afloop van de huidige layout en render cycle, en dat is laat genoeg. Alternatief was om dit separaat te doen, via InteractionManager.runAfterInteractions, maar ik weet niet of dat betrouwbaar is, en die is bovendien deprecated.
jonathan-waarneming-nl
left a comment
jonathan-waarneming-nl
left a comment
There was a problem hiding this comment.
👌 Wat een gedoe...
| autoCapitalize="none" | ||
| onBlur={[Function]} | ||
| onFocus={[Function]} | ||
| onLayout={[Function]} |
There was a problem hiding this comment.
Je zou er nog voor kunnen kiezen om geen functie mee te geven als er geen autoFocus moet gebeuren.
Fix for the autoFocus property passed to TextInput by InputField not working reliably anymore on React Native 0.83