Adding fix for Manual set value clearTextOnSubmit-style behavior not working on Fabric #15277
Conversation
|
/azp run |
|
Azure Pipelines successfully started running 2 pipeline(s). |
|
/azp run |
|
Azure Pipelines successfully started running 2 pipeline(s). |
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a regression in TextInput behavior between Paper and Fabric architectures where manual value clearing on submit (clearTextOnSubmit-style behavior) was not working correctly. The issue occurred when JavaScript immediately updated the text value during onSubmitEditing, causing synchronization problems between native and JS state.
Key Changes:
- Modified event count validation to accept immediate JS updates by changing the condition from
eventCount >= m_nativeEventCounttoeventCount >= m_nativeEventCount - 1 - Added state synchronization when clearing text to ensure React state stays consistent with native TextInput state
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp |
Modified event count check and added state update logic when clearing text on submit |
change/react-native-windows-daac39ef-4292-4f66-81ae-708b1c0f6676.json |
Added change file for versioning |
vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp
Outdated
Show resolved
Hide resolved
change/react-native-windows-daac39ef-4292-4f66-81ae-708b1c0f6676.json
Outdated
Show resolved
Hide resolved
…76.json Co-authored-by: Copilot <[email protected]>
|
In the video when you pressed enter in last text input why did it have the value "backslash" instead of empty? |
I pressed back slash key by mistake after pressing enter from my keyboard |
| // Allow text updates that are very close to the current native event count | ||
| // This handles the case where JavaScript immediately calls setValue during onSubmitEditing | ||
| // In that case, eventCount might be one less than m_nativeEventCount due to timing | ||
| if (eventCount >= m_nativeEventCount - 1) { |
There was a problem hiding this comment.
I am not able to understand on how this is related to pressing enter for clearOnSubmit? What about all existing worflows for events?
There was a problem hiding this comment.
Can you try removing this change and check if your code is working fine for clearOnSubmit?
There was a problem hiding this comment.
Yeah, this seems like it would cause us to get into all kinds of bad states, if we start listening to JS commands when native is an event behind.
|
/azp run |
|
Azure Pipelines successfully started running 2 pipeline(s). |
Okay can you please re-record and attach correct before and after videos? |
|
Description Summary missing in the end. |
|
E2ETestAppFabric Unit Test verification? |
| m_textServices->TxSetText(L""); | ||
| // Also update the state to reflect the cleared text | ||
| // This ensures consistency between native and JS state | ||
| auto data = m_state->getData(); |
There was a problem hiding this comment.
This should already happen through WindowsTextInputComponentView::OnTextUpdated. -- Why are we not hitting that case?
There was a problem hiding this comment.
You're right that TxSetText(L"") should normally trigger [EN_CHANGE] → OnTextUpdated(). However, there are several timing and context issues that make the manual state update necessary. One reason why we are not hitting the case I believe is that OnTextUpdated() method has a condition if (m_eventEmitter && !m_comingFromJS) that prevents event emission when m_comingFromJS is true. While we're not setting m_comingFromJS = true here, there might be other state flags or timing issues that could suppress the automatic notification.
reuploaded before and after videos |
Added in next commit |
It's already there in description |
clearTextONsubmit.mp4Current behavior with ClearTextOnSubmit with mainline changes |
3 participants
Description
TextInput regression between Paper and Fabric: Manual set value clearTextOnSubmit-style behavior not working
Type of Change
Why
TextInput regression between Paper and Fabric: Manual set value clearTextOnSubmit-style behavior not working
Resolves [https://github.com//issues/15168]
What
What changes were made to the codebase to solve the bug, add the functionality, etc. that you specified above.
Modified to if (eventCount >= m_nativeEventCount - 1) to allow immediate JS side changes.
Added State Synchronization for Clear Text to ensure the React state stays in sync with the native TextInput when text is cleared.
Screenshots
Before
15168-before.mp4
After
15168-after.mp4
Testing
yarn build passed successfully, added a sample textInput field in RNTester-Fabric app to repro the issue.
Ran E2ETestAppFabric Unit Test
Changelog
Should this change be included in the release notes: yes
Add a brief summary of the change to use in the release notes for the next release.
Microsoft Reviewers: Open in CodeFlow
Microsoft Reviewers: Open in CodeFlow