Comments (5)
iSuslov
commented on July 19, 2024
1
Same problem +1
from paper-toast.
schlm3
commented on July 19, 2024
I have a very similar issue here, but I am using polymer 1.x components (latest from 1.x branch).
I have encountered two different behaviors, which depend on if "autofocus" is set on the paper-input.
Here is an example which shows the two behaviors:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Focusbehavior with toasts</title>
<link rel="import" href="../../bower_components/polymer/polymer.html">
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
</head>
<body>
<paper-toast id="toast" ></paper-toast>
<h2>Demonstrates autofocus-behavior inside a dialog while displaying a toast.</h2>
<paper-button onclick="dialog1.open()">Press to open Dialog (using autofocus)</paper-button>
<paper-dialog id="dialog1">
<h2>dialog1</h2>
<p>After dialog opens, first input should get the focus automatically.</p>
<p>When setting the focus into the second input manually during the first 2 seconds, it should remain there. </p>
<p>When entering text in second field, every character typed should appear in the field.</p>
<p>--> when toast closes, focus changes to first field, text entered appears there.</p>
<paper-input id="myInput1" autofocus placeholder="first input"></paper-input>
<paper-input placeholder="second input"></paper-input>
</paper-dialog>
<script>
dialog1.addEventListener('iron-overlay-opened', function(){
console.log("dialog1 overlay opened");
// Simulate background event triggered toast to open.
setTimeout(function(){
toast.show({text:"closing in 3sec...",duration:3000});
}, 2000);
});
</script>
<h2>Demonstrates non-autofocus-behavior inside a dialog while displaying a toast.</h2>
<paper-button onclick="dialog2.open()">Press to open Dialog (using setFocus())</paper-button>
<paper-dialog id="dialog2">
<h2>dialog2</h2>
<p>After dialog opens, first input should get the focus automatically (ok).</p>
<p>When entering text, every character typed should appear in the field.</p>
<p>--> when toast closes, focus is lost and text entered gets lost.</p>
<paper-input id="myInput2" placeholder="first input"></paper-input>
<paper-input placeholder="second input"></paper-input>
</paper-dialog>
<script>
dialog2.addEventListener('iron-overlay-opened', function(){
// simulate user sets focus into first field
myInput2.focus();
console.log("dialog2 overlay opened");
// Simulate background event triggered toast to open.
setTimeout(function(){
toast.show({text:"closing in 3sec...",duration:3000});
}, 2000);
});
</script>
</body>
</html>
The issue is really annoying, since we use a dialog for our login, which may be displayed during the rest of our app is still loading in the background. During this background activity, errors may occur which trigger the toast and therefore will steal the focus.
Even more problematic with the "autofocus" feature enabled, where the user eventually ends with typing the password into the username field...
from paper-toast.
schlm3
commented on July 19, 2024
The title of the issue may be misleading, since the problem does not only happen when calling hide(), but simply every time the toast closes.
from paper-toast.
jasonsavard
commented on July 19, 2024
I found a workaround by adding no-auto-focus to your paper-dialog.
from paper-toast.
valdrinkoshi
commented on July 19, 2024
This looks like a bug on iron-overlay-behavior, here a simpler repro: http://output.jsbin.com/donaqan/1
from paper-toast.
Related Issues (20)
- Hide then show toast HOT 5
- open() close() etc. methods HOT 1
- Allow custom styling for paper-toast HOT 2
- Toast remaining as invisible barrier in Chrome
- override resetFit rather than center
- paper-toast's alignment abilities is a lie. HOT 5
- The `paper-toast` element is hidden from drawer content on iPad with Safari HOT 4
- <paper-toast> is partially hidden by app-drawer HOT 12
- Pattern to create multiple toast HOT 2
- , HOT 2
- paper-toast doesn't support center alignment HOT 7
- paper-toast does not scroll correctly when fitInto is set. HOT 1
- Callback when toast closes HOT 1
- Button within toast falls out of alignment upon receiving keyboard focus. HOT 3
- Align button HOT 1
- noCancelOnOutsideClick is false but still not closes the toast on clicking on 'paper-tabs' area HOT 2
- this element doesn't appear in any collection webcomponents.org HOT 4
- Toast fitInto/fit-bottom not working correctly. HOT 5
- On-tap doesn't work on mobile HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from paper-toast.