Open 1880akshay opened 1 month ago
Hey, I can check this out.
The issue is that after clicking on TextInput
one of the styles, that is added to the container, prevents flattening which causes adding remove and insert mutation on TextInput in differentiator. On the remove
mutation, the TextInput loses focus, so the onBlur
is triggered immediately after that. This will also happen on other styles, for instance setting opacity < 1
, transform
or any other style that would add FormsStackingContext
trait on this view, which are defined here. It won't update areChildrenFlattened
in differentiator to true
, so the recursion will stop and the TextInput won't be added here to the list. It will cause differences in returned trees and it will generate above-mentioned mutations.
For the quick fix, you can add collapsable={false}
to the View component:
<View collapsable={false} style={[styles.shadowBox, focus && styles.shadowBoxFocused]}>
<TextInput
placeholder="Text"
style={{height: 60, width: 300, borderColor: 'black', borderWidth: 1}}
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
/>
</View>
The problem is that we cannot perform remove
and insert
mutations on something that needs to hold focus. I am not sure if searching for a solution that will work only for TextInput
is a good idea. Is it good enough solution for now or should I proceed with something that will work in a broader scope?
@coado thanks for the prompt replies. I'll test this out (collapsable=false) and let you know if it works. Meanwhile, I am curious as to why this worked in old architecture and the issue is only happening with new architecture?
The issue seems to be related to view flattening which was introduced in the new architecture. You can read more about it here
Thanks for the clarification @coado . Also, collapsable = false fix is working fine! I also wanted to know, that collapsable property exists on android even in old architecture and it did flatten the view hierarchies, I wonder how it used to work earlier.
Description
When a TextInput is wrapped with a View, and the View is given conditional styles based on the focus state of the TextInput, the keyboard gets dismissed as soon as it is tapped to gain focus. So, as soon as onFocus is called, onBlur is triggered automatically. Note that this is not happening for all style keys, but I have encountered it only for "elevation" and "shadowColor" properties till now.
The issue is only happening when new architecture is enabled on both android and ios.
Steps to reproduce
Here is a minimum reproducible example for the issue: https://github.com/1880akshay/RN_NewArch_TextInput
React Native Version
0.74.3
Affected Platforms
Runtime - Android, Runtime - iOS
Areas
Fabric - The New Renderer
Output of
npx react-native info
Stacktrace or Logs
Reproducer
https://github.com/1880akshay/RN_NewArch_TextInput
Screenshots and Videos
https://github.com/user-attachments/assets/7a70be20-4d74-4da1-9b07-aae8472f0a60