Web: Fixes #13544: Fix input issues with the title field on the web app #13563
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
On the Joplin web app, there are severe input issues when composing the title field on Windows (and possibly other desktop OS's). The cursor will keep jumping to the end of the title input, which is easily reproducible by typing fast in the input. This is because in React Native Web, when multiple re-renders are fired due to state changes on a controlled TextInput, this can result in the input being recreated (according to ChatGPT), which causes the cursor position to reset to the end of the input. In order to remedy this, I have combined the state updates made when editing the title field, and suppressed the additional state update made when the scheduled save for the title update executes.
Please note, the is still an issue present whereby if you edit the note body and then quickly edit the title before the scheduled save has executed, this results in the title being overwritten with the title at the time of save of the note body was scheduled. This however is a minor issue compared to the issue this PR fixes.
This fixes #13544
Testing
I have verified that the auto title feature works correctly and the title input no longer exhibits the issue when typing fast. I have verified the behaviour is unchanged on the native Android app
Before change:
input.issue.before.mp4
After change:
input.issue.after.mp4