Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SelectionArea supported gestures should have feature parity with TextSelectionGestureDetector #129583

Open
Renzo-Olivares opened this issue Jun 26, 2023 · 3 comments · Fixed by #132682 · May be fixed by #153514
Open

SelectionArea supported gestures should have feature parity with TextSelectionGestureDetector #129583

Renzo-Olivares opened this issue Jun 26, 2023 · 3 comments · Fixed by #132682 · May be fixed by #153514
Assignees
Labels
a: text input Entering text in a text field or keyboard related problems c: proposal A detailed proposal for a change to Flutter f: gestures flutter/packages/flutter/gestures repository. f: selection SelectableRegion, SelectionArea, SelectionContainer, Selectable, and related APIs framework flutter/packages/flutter repository. See also f: labels. P1 High-priority issues at the top of the work list team-framework Owned by Framework team triaged-framework Triaged by Framework team

Comments

@Renzo-Olivares
Copy link
Contributor

Renzo-Olivares commented Jun 26, 2023

SelectionArea should have the same supported gestures as TextSelectionGestureDetector. This is a pre-requisite for migrating TextField from TextSelectionGestureDetector to SelectionArea. Some of these gestures are also needed for re-implementing SelectableText with SelectionArea #104547.

Platform Common:

TextSelectionGestureDetector SelectionArea isEditable/isNonEditable
Double tap to select a word #149295 Both
Double tap drag to select word-by-word #149295 Both
Double click to select a word #124817 Both
Double click drag to select word-by-word #124817 Both
Triple tap to select a paragraph Implementation is there but needs to be enabled. Static text behavior on native platforms have this disabled. Both
Triple tap drag to select paragraph-by-paragraph Implementation is there but needs to be enabled. Static text behavior on native platforms have this disabled. Both
Triple tap to select all in a single-line input field isEditable
Triple click to select a paragraph #144563 Both
Triple click drag to select paragraph-by-paragraph #144563 Both
Triple click to select all in a single-line input field isEditable
Long press to select word-by-word #132518 Both
Shift click to extend selection to clicked position #129583 Both

Platform Mobile:

TextSelectionGestureDetector SelectionArea isEditable/isNonEditable
On single tap up moves the cursor to the tapped position #132682 Both

Platform Desktop:

TextSelectionGestureDetector SelectionArea isEditable/isNonEditable
On tap down moves the cursor to the tapped position #132682 Both

Platform Android:

TextSelectionGestureDetector SelectionArea isEditable/isNonEditable
Drag to move cursor isEditable

Platform iOS:

TextSelectionGestureDetector SelectionArea isEditable/isNonEditable
Select word edge on tap up Both
Drag that begins on cursor moves the cursor isEditable
Long press to move cursor isEditable
Single tap on previous selection should toggle toolbar #13285 Both

Platform Linux:

TextSelectionGestureDetector SelectionArea isEditable/isNonEditable
Triple tap to select a line #153514 Both
Triple tap drag to select line-by-line #153514 Both

Other details:
On a windows touch screen device the context menu does not show up until the long press ends in editable/static text contexts. On a long press drag it collapses the cursor at the position when the long press ends (editable text). On a long press hold it selects the word on drag start as well as popping up the selection handles (static text). On a long press drag nothing happens (the word at the long press start is selected) (static text).

Normal touch drag does nothing on static text. Consecutive taps also does nothing on static text / consecutive tap drag.

On a normal touch drag it acts as a mouse drag (editable text). On Editable text consecutive tap / consecutive tap drag works.

on tap down/tap up works similar to android for editable text, the selection is set on tap up.

@Renzo-Olivares Renzo-Olivares changed the title SelectionArea should have feature parity with TextSelectionGestureDetector SelectionArea supported gestures should have feature parity with TextSelectionGestureDetector Jun 26, 2023
@danagbemava-nc danagbemava-nc added in triage Presently being triaged by the triage team a: text input Entering text in a text field or keyboard related problems framework flutter/packages/flutter repository. See also f: labels. f: gestures flutter/packages/flutter/gestures repository. c: proposal A detailed proposal for a change to Flutter f: selection SelectableRegion, SelectionArea, SelectionContainer, Selectable, and related APIs and removed in triage Presently being triaged by the triage team labels Jun 27, 2023
@goderbauer goderbauer added the P3 Issues that are less important to the Flutter project label Jun 27, 2023
@flutter-triage-bot flutter-triage-bot bot added team-framework Owned by Framework team triaged-framework Triaged by Framework team labels Jul 8, 2023
@Renzo-Olivares Renzo-Olivares self-assigned this Aug 15, 2023
@Renzo-Olivares Renzo-Olivares added P1 High-priority issues at the top of the work list and removed P3 Issues that are less important to the Flutter project labels Aug 15, 2023
@justinmc
Copy link
Contributor

Given that there are so many unimplemented gestures on SelectionArea, is work better spent allowing it to share this code with EditableText instead of reimplementing these? Or is it not so simple?

@Renzo-Olivares
Copy link
Contributor Author

Talked offline with @justinmc and agreed to keep a look out for opportunities where we can re-use logic from EditableText.

auto-submit bot pushed a commit that referenced this issue Sep 28, 2023
This change collapses the selection at the clicked/tapped location on single click down for desktop platforms, and on single click/tap up for mobile platforms to match native.

This is a change from how `SelectionArea` previously worked. Before this change a single click down would clear the selection. From observing a native browser it looks like when tapping on static text the selection is not cleared but collapsed. A user can still attain the selection from static text using the `window.getSelection` API.

https://jsfiddle.net/juepasn3/11/ You can try this demo out here to observe this behavior yourself. When clicking on static text the selection will change.

This change also allows `Paragraph.selections` to return selections that are collapsed. This for testing purposes to confirm where the selection has been collapsed.

Partially fixes: #129583
Mairramer pushed a commit to Mairramer/flutter that referenced this issue Oct 10, 2023
This change collapses the selection at the clicked/tapped location on single click down for desktop platforms, and on single click/tap up for mobile platforms to match native.

This is a change from how `SelectionArea` previously worked. Before this change a single click down would clear the selection. From observing a native browser it looks like when tapping on static text the selection is not cleared but collapsed. A user can still attain the selection from static text using the `window.getSelection` API.

https://jsfiddle.net/juepasn3/11/ You can try this demo out here to observe this behavior yourself. When clicking on static text the selection will change.

This change also allows `Paragraph.selections` to return selections that are collapsed. This for testing purposes to confirm where the selection has been collapsed.

Partially fixes: flutter#129583
@conformtojesus
Copy link

conformtojesus commented Jun 18, 2024

With iOS, Is it possible to combine gestures with SelectionArea, such as long press to select a word, tap to select a sentence/paragraph etc.

auto-submit bot pushed a commit that referenced this issue Jun 21, 2024
… platforms (#149295)

This change enables double tap / triple tap support in SelectionArea for mobile platforms:
Android / Fuchsia: 
- On native, these platforms allow for double tap / double tap   drag to select word-by-word.
- On web using touch, these platforms only support double tap to select word.
- On web and native using a mouse, these platforms support double click / double click   drag to select word-by-word, and triple click / triple click   drag to select paragraph-by-paragraph.

iOS:
- On native, these platforms allow for double tap / double tap   drag to select word-by-word.
- On web using touch, these platforms do not support double tap/triple tap gestures.
- On web using touch, these platforms allow support double tap   drag gestures.
- On web and native using a mouse, these platforms support double click / double click   drag to select word-by-word, and triple click / triple click   drag to select paragraph-by-paragraph.

Part of: #129583
sigurdm pushed a commit to sigurdm/flutter that referenced this issue Jun 26, 2024
… platforms (flutter#149295)

This change enables double tap / triple tap support in SelectionArea for mobile platforms:
Android / Fuchsia: 
- On native, these platforms allow for double tap / double tap   drag to select word-by-word.
- On web using touch, these platforms only support double tap to select word.
- On web and native using a mouse, these platforms support double click / double click   drag to select word-by-word, and triple click / triple click   drag to select paragraph-by-paragraph.

iOS:
- On native, these platforms allow for double tap / double tap   drag to select word-by-word.
- On web using touch, these platforms do not support double tap/triple tap gestures.
- On web using touch, these platforms allow support double tap   drag gestures.
- On web and native using a mouse, these platforms support double click / double click   drag to select word-by-word, and triple click / triple click   drag to select paragraph-by-paragraph.

Part of: flutter#129583
auto-submit bot pushed a commit that referenced this issue Jul 31, 2024
…148574)

Shift   Click to move the selection end edge on desktop platforms. This is consistent with native Linux and Windows. On macOS the behavior moves the selection edge closest to the tapped position (will implement in a later PR).

Part of: #129583
TytaniumDev pushed a commit to TytaniumDev/flutter that referenced this issue Aug 7, 2024
…lutter#148574)

Shift   Click to move the selection end edge on desktop platforms. This is consistent with native Linux and Windows. On macOS the behavior moves the selection edge closest to the tapped position (will implement in a later PR).

Part of: flutter#129583
Buchimi pushed a commit to Buchimi/flutter that referenced this issue Sep 2, 2024
…lutter#148574)

Shift   Click to move the selection end edge on desktop platforms. This is consistent with native Linux and Windows. On macOS the behavior moves the selection edge closest to the tapped position (will implement in a later PR).

Part of: flutter#129583
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a: text input Entering text in a text field or keyboard related problems c: proposal A detailed proposal for a change to Flutter f: gestures flutter/packages/flutter/gestures repository. f: selection SelectableRegion, SelectionArea, SelectionContainer, Selectable, and related APIs framework flutter/packages/flutter repository. See also f: labels. P1 High-priority issues at the top of the work list team-framework Owned by Framework team triaged-framework Triaged by Framework team
Projects
None yet
5 participants