-
Notifications
You must be signed in to change notification settings - Fork 27
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
paper buttons get unexpected focus on Android and iOS Chrome #80
Comments
(Changed the live demo link in the description from the plnkr.co link I was originally using, since it was flaky) |
Hmmm, this sounds a lot like PolymerElements/paper-button#24. Do you think it's the same? |
It looks like it could be related, though I've never triggered this by switching browser tabs. FWIW, you can reproduce this in desktop Chrome by turning on mobile device emulation: Looking further, I just set a breakpoint in Walking up the stack a little further, I came to At that point my call stack ends, so I'm not immediately sure what's triggering |
@notwaldorf I noticed that with the following patch against my repro, the bug goes away: diff --git a/app-root.html b/app-root.html
index 7918ac2..b6a5de6 100644
--- a/app-root.html
+++ b/app-root.html
@@ -101,7 +101,7 @@
changePage: function (page) {
this.async(function () {
this.set('pageData.page', page);
- });
+ }, 250);
},
_computePage: function (pageData) {
return pageData.page; Is this somehow a helpful clue in fixing the bug? |
Looking into this deeper, it seems to be an issue with our state machine in iron-button-state. Due to the sticky behavior of a tap, the button under the finger while you tap changes due to the javascript, and thus a new button is focused. The problem is that since this is a new button with a different instance of This is why when you change the state with the TL;DR: The user enters the state machine of iron-button-state at the wrong point |
Thanks for taking a look at this @e111077! That explanation makes it sound to me like the finger is being held down in the same spot while button A is swapped out for button B, which is what's causing button B to think there's a finger over it, and therefore that it should be focused. But when I hold my finger down over button A, nothing happens -- that is, it's not actually swapped out for button B -- until I lift my finger off of it. Which is how it seems like Given that, I'm not following why the system ever thinks there's a finger over button B. Am I misunderstanding? In any case, it looks like we agree that the line |
Meant to say, one other thing that would be interesting to address here is why the bug manifests in some environments (e.g. Chrome for iOS and Android) but not others (mobile Safari). |
We upgraded to Polymer 2 and are still seeing this behavior. I realized I could create an even simpler reproduction using The source for this is at https://github.com/jab/paper-behaviors-issue-80/blob/master/polymer2.html @notwaldorf @e111077 et al., do you have any ideas for a fix or workaround? Thanks so much for taking a look! |
Meant to say, this new test case reproduces the bug for me no matter what browser or platform I test with. I assume it's the same bug with incorrect "using the keyboard?" detection, but please let me know if it's a separate issue. |
Unfortunately, the comment I previously made on paper-button is still the case (code reference should now be https://github.com/PolymerElements/iron-behaviors/blob/46cc9bd4c09a87650697584cc60dd52a352bccfd/iron-button-state.html#L124). |
Expected outcome
The button is not focused.
Actual outcome
The button is focused.
Live Demo
https://jab.github.io/paper-behaviors-issue-80/
source: https://github.com/jab/paper-behaviors-issue-80/
Steps to reproduce
Browsers Affected
Hypothesis
Looking at https://github.com/PolymerElements/paper-behaviors/blob/fd8c137/paper-inky-focus-behavior.html#L26-L33, I think what's happening is that for some reason, the
receivedFocusFromKeyboard
param is getting passed in astrue
, even though the only user interactions have been taps (there's no keyboard in sight).Screenshots
Chrome for iOS
Chrome for Android
The text was updated successfully, but these errors were encountered: