Skip to content

Conversation

@bleroux
Copy link
Contributor

@bleroux bleroux commented Aug 29, 2023

Description

This PR fixes changes how InkWell reacts to keyboard activation.

Before: the activation started a splash and immediately terminated it which did not let time for widgets that resolve material state properties to react (visually it also mean the splash does not have time to expand).

After: the activation starts and terminates after a delay (I arbitrary choose 200ms for the moment).

Related Issue

Fixes #132377.

Tests

Adds one test.

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Aug 29, 2023
@bleroux bleroux marked this pull request as draft August 29, 2023 14:51
@flutter-dashboard
Copy link

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

@bleroux bleroux marked this pull request as ready for review August 29, 2023 17:49
@bleroux bleroux requested a review from HansMuller August 29, 2023 17:50
@bleroux
Copy link
Contributor Author

bleroux commented Aug 29, 2023

@HansMuller This is the solution I came up for #132377. It breaks some existing tests because it adds a delay before the handleTap function is called.
If your ok with this approach, I will figure out where to add some documentation.

@HansMuller
Copy link
Contributor

I've asked @gspencergoog to look at this. Introducing a delay before calling handleTap does seem fraught, at least on the face of it.

Copy link
Contributor

@gspencergoog gspencergoog left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, if I understand this correctly, this is basically adding a 200ms delay when an InkWell is activated via keyboard to simulate the time between the mouse down and mouse up of a tap?

I know 200ms is arbitrary, so could it be 100ms instead? Or, even better, could it call handleTap right away, but execute the ink splash simultaneously?

The reason I ask is that I would expect that keyboard interactions with buttons would be faster than mouse interactions, and if I was implementing a virtual keyboard with InkWells, I wouldn't want it to be limited in typing speed/response time because of this delay. In a case like that, I could also imagine that keystrokes might get missed if I typed the same key rapidly, or at the least that they might build up and keep reacting long after I stopped pressing it.

@bleroux bleroux force-pushed the materialstate_pressed_missing branch from 626c4dc to 442c1b4 Compare August 31, 2023 12:47
@bleroux bleroux force-pushed the materialstate_pressed_missing branch from 442c1b4 to 8b2e318 Compare August 31, 2023 13:14
@bleroux
Copy link
Contributor Author

bleroux commented Aug 31, 2023

So, if I understand this correctly, this is basically adding a 200ms delay when an InkWell is activated via keyboard to simulate the time between the mouse down and mouse up of a tap?

Yes, exactly. I think the fundamental question is what does the 'pressed' state means when an Inkwell is activated via keyboard?
Before this PR, once activated via keyboard, the InkWell switch back immediately to pressed state false.

I know 200ms is arbitrary, so could it be 100ms instead? Or, even better, could it call handleTap right away, but execute the ink splash simultaneously?

Based on your comment, I updated the PR:

  • to use a 100ms delay.
  • to not rely on the existing handleTap (which is tailored for tap events) and introduce a separate logic for keyboard activation. Doing so neither the splash nor the onTap callback are delayed. So what is delayed is the MaterialStateController.value having the pressed state removed.

With this change it is way less risky (no existing test broken). Another solution would be to document that relying on MaterialState.pressed is not possible when using keyboard activation (it might not be easy to find where to add such a comment).

@bleroux bleroux requested a review from gspencergoog August 31, 2023 14:27
@gspencergoog
Copy link
Contributor

I think this is much better that the previous version.

We shouldn't just document that you can't rely on MaterialState.pressed from the keyboard, because that makes it harder to write code that works with both regular taps and keyboard activation, which should follow similar code paths.

I think, ideally, if you have keyboard activation, then it should enter the pressed state when the activation key goes down and activates the onTap, and exit the pressed state when it gets a key up, . Unfortunately, the ShortcutActivators only activate on key down, and ignore key up, so I'm not sure how you could implement that in a generic way (for instance, you could listen for key up events on Enter to turn off the state, but that isn't generic enough).

You could probably do something more complex and capture all the keys that were down when the InkWell was activated, and then remove the pressed state when any of those keys is no longer down, which would let you do it without knowing which one was the activator, but wouldn't be terribly accurate. In most cases, it would probably work well enough, though, since the common case would be a single key down (e.g. Enter or Space).

We can start with just the 100ms delay here, and if that becomes problematic (e.g. someone is writing a game and wants to know how long the key was pressed, but is using the pressed state and InkWells to do it), then we can revisit that decision. There are other ways to capture key events, so it likely will be good enough for most uses.

Copy link
Contributor

@gspencergoog gspencergoog left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

32384589-a60f0e74-c078-11e7-9bc1-e5b5287aea9d

Co-authored-by: Greg Spencer <[email protected]>
@bleroux bleroux added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 1, 2023
@auto-submit auto-submit bot merged commit 510ecaa into flutter:master Sep 1, 2023
@bleroux bleroux deleted the materialstate_pressed_missing branch September 1, 2023 12:20
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 1, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 1, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 1, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 1, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 3, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 3, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 3, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 4, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 4, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 5, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 5, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 5, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 6, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 7, 2023
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

autosubmit Merge PR when tree becomes green via auto submit App f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MaterialState.pressed is missing when pressing button with keyboard

3 participants