Bullet/Editable: Use fastClick for clickHandler #2752
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ethan-james
commented
Jan 4, 2025
| @@ -203,6 +203,8 @@ const Editable = ({ | |||
| // set offset to null to allow the browser to set the position of the selection | |||
| let offset = null | |||
|
|
|||
| if (isTouch && isSafari() && contentRef.current?.innerHTML.length) offset = contentRef.current.innerHTML.length | |||
There was a problem hiding this comment.
The caret was getting positioned at the end of the thought somehow onFocus, so I wanted to preserve that behavior onTap.
ethan-james
commented
Jan 4, 2025
| @@ -51,6 +51,7 @@ const useEditMode = ({ | |||
| selection.clear() | |||
| } else { | |||
| selection.set(contentRef.current, { offset: editingCursorOffset || 0 }) | |||
| if (isTouch && isSafari()) contentRef.current?.focus() | |||
There was a problem hiding this comment.
I'm not quite sure why this is necessary, but it was having the following problem on iOS Safari:
- Tap a thought - cursor moves, keyboard stays closed
- Tap it again - keyboard opens
- Close keyboard
- Tap it again - keyboard does not open
There was a problem hiding this comment.
Thanks, good catch.
I'll create a separate issue to get to the bottom of this.
ethan-james
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Fix #1691
The
Bulletcomponent was usingonClickto dispatch itssetCursoraction, which has a noticeable delay on iOS. Wrapping the click handler infastClicksolves the issue.In
Editable, theonTaphandler was ignoring taps that would cause the keyboard to open, and falling back to theonFocushandler after a 300ms delay. It was necessary to intercept those taps and set the cursor with a manual offset to put the caret back at the end of the thought on iOS Safari. There was also some flakiness whereselection.setwasn't always opening the keyboard, so now it callscontentRef.current.focus()explicitly.