-
Notifications
You must be signed in to change notification settings - Fork 2.1k
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
Snackbar not closing #1398
Comments
I got some more related issues:
This is probably because the focus is set on the action button inside the Snackbar and as there is no action button, the focus can not be set and thus the blur is never triggered. Setting a space character in the Action Text textfield is a workaround for this issue. |
I'd assume this is when the tab is switched back to the MCW tab being active. The snackbar is given focus since it is used as a priority message system that users may need to interact with within the given time constraint. So making that the focus before returning to page focus is there for screen readers and other accessible technology. This way, users actually get the information provided. |
@Garbee Thank you for your reply and I get your point. But wouldn't it be better to just reset the close timer as the Snackbar does not get removed when having focus (obviously you don't want it to be removed while the user is actively using it)? |
Not necessarily. It all depends on tab order within the page. By forcing focus, you're negating any travel time to give the user the most pertinent information as quickly as possible before it leaves. |
Thanks, that answers my question. |
I don't know off the top myself. I'd need to do deeper debugging of the code as it runs to understand that. I'm seeing a blur event happen when tabs are switched, so that should trigger the blurring even though it really shouldn't. I think there needs to be some analysis of the blur event to see what the cause is (or simply if the page is visible using the page visibility API) to handle things well for that scenario. Currently, a blur is a blur is a blur but that isn't necessarily the case given the context and needs of a snackbar. |
I'm coping with this problem checking on tab/window change if the snackbar is still active, disabling and recreating it if so (and after 1.5s for a smooth slide down animation and to give the time to read it). This is my code, it seems to work on most browsers (I'm using webpack/babili): document.addEventListener('DOMContentLoaded', function () {
let first = true
let hidden = 'hidden'
// Standards:
if (hidden in document) {
document.addEventListener('visibilitychange', onchange)
} else if ((hidden = 'mozHidden') in document) {
document.addEventListener('mozvisibilitychange', onchange)
} else if ((hidden = 'webkitHidden') in document) {
document.addEventListener('webkitvisibilitychange', onchange)
} else if ((hidden = 'msHidden') in document) {
document.addEventListener('msvisibilitychange', onchange)
} else if ('onfocusin' in document) { // IE 9 and lower:
document.onfocusin = document.onfocusout = onchange
} else { // All others:
window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange
}
function onchange (evt) {
let v = 'visible'
let h = 'hidden'
let evtMap = {
focus: v, focusin: v, pageshow: v, blur: h, focusout: h, pagehide: h
}
evt = evt || window.event
let visibility = v
if (evt.type in evtMap) {
visibility = evtMap[evt.type]
} else {
visibility = this[hidden] ? h : v
}
if (first) {
first = false
return
}
if (visibility === v) {
let el = document.querySelector('.mdc-snackbar--active')
if (el) {
setTimeout(function () {
el.setAttribute('aria-hidden', true)
el.classList.remove('mdc-snackbar--active')
window.snackbar = mdc.snackbar.MDCSnackbar.attachTo(el)
}, 1500)
}
}
}
// set the initial state (but only if browser supports the Page Visibility API)
if (document[hidden] !== undefined) {
onchange({type: document[hidden] ? 'blur' : 'focus'})
}
}) |
[UPDATE] This workaround/fix works 80% of the time. Still having issues. It seems like using Workaround/Fix: setTimeout.
One last thing. 2+2 is 4, minus 1 is 3; quick maths. smoke trees.🌲 |
I'm not even understanding my |
For me snackbar doesn't close even without switching tabs, probably when called from inside a promise. |
BTW: My final final solution was to have the action button show in the toast just in case it got stuck, user could close it. This seems to be the best solution.
|
Update: I'm not sure how this is related, but removing ['touchstart', 'mousedown'/*, 'focus'*/].forEach((evtType) => {
this.adapter_.deregisterCapturedInteractionHandler(evtType, this.interactionHandler_);
}); On the login screen after user successfully logged in, I'm showing a message Successfully signed in and using history api to redirect to home page. This is when snackbar message gets stuck. |
Update: Unfortunately this also triggers snackbars' This has behavior has been introduced in #852 Snackbar should check if the focused element is a snackbar itself or it's action element and only then use the // index.js
return new MDCSnackbarFoundation({
// ...
isFocused: () => document.activeElement === getActionButton(),
})
// foundation.js
this.interactionHandler_ = (evt) => {
if (!this.adapter_.isFocused()) {
return;
}
// ...
} |
My use case relates to #1918. |
Using the Page Visibility API and the let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
let _timeoutId;
let handleVisibilityChange = () => {
if (document[hidden]) {
// Tab sent to background
if (typeof _timeoutId !== 'undefined') {
clearTimeout(_timeoutId)
}
} else {
// Tab came back
_timeoutId = setTimeout(() => { this.mdcObject.getDefaultFoundation().cleanup_() }, 1000 * (this.stackPosition + 1))
}
}
document.addEventListener(visibilityChange, handleVisibilityChange, false) It dismisses the Snackbars one per second depending on my |
Is there any activity on this issue? |
@apoterenko I didn't have the time to get to the bottom of the issue and make a PR with a fix and I was even thinking about implementing a default |
Still watching this issue. A manual dismiss action would be quite lovely as a bandaid until a true fix can be made. |
@elitegoliath Not sure if you are asking for a manual dismiss action, but I am pretty sure this won't be implemented in MDC. You could implement this in your own project as long as the problem exists though, something like: <div class="mdc-snackbar" aria-live="assertive" aria-atomic="true" aria-hidden="true">
<div class="mdc-snackbar__text"></div>
<div class="mdc-snackbar__action-wrapper">
<button type="button" class="mdc-snackbar__action-button"></button>
</div>
</div> import {MDCSnackbar} from '@material/snackbar';
const snackbarElement = document.querySelector('.mdc-snackbar');
const snackbar = new MDCSnackbar(snackbarElement);
const dataObj = {
message: 'Message that is possibly not automatically hidden',
actionText: 'Dismiss',
actionHandler: function () {
snackbarElement.setAttribute('aria-hidden', true);
snackbarElement.classList.remove('mdc-snackbar--active');
}
};
snackbar.show(dataObj); |
Guys, see if #2183 fixes issue at least for some of you |
Just found another way of making the snackbar hard to close and its easy to reproduce.
|
This [stackoverflow answer](
https://stackoverflow.com/questions/10109660/should-i-call-cleartimeout-before-overwriting-the-timeout-variable)
seems to illustrate how to properly use `.setTimeout`.
Your call to setTimeout returns an integer to id it, so that you have a
reference to it when you want to clear it. So overwriting the variable
doesn't clear the timeout it just overwrites your reference to it's id. If
you overwrite the reference you can no longer clear the earlier one :-(
You'll use clearTimeout as Niko says - to stop the callback from firing.
illustration:
```
var t = setTimeout(ch, 1000, "first timeout");
t = setTimeout(ch, 1500, "second timeout");
clearTimeout(t); // this will only clear the second timeout
t = setTimeout(ch, 2000, "third timeout");
function ch(s){
console.log(s);
}
```
…On Thu, Jul 12, 2018 at 2:49 AM, pndewit ***@***.***> wrote:
Just found another way of making the snackbar hard to close and its easy
to reproduce.
1. Open the MDC snackbar demos: https://material-components-
web.appspot.com/snackbar.html
2. Press the "Show" button
3. Press the "Undo" button in the snackbar before it closes
4. Wait for at least 3 seconds (the snackbar timeout)
5. Press the "Show" button again
6. Note that the snackbar opens *WITH* the Undo action button, but the
button is removed shortly after and the snackbar is not closing any more...
Making it really hard to close...
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1398 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AMKS-29qH4BpPI0RZe0eBd2Bc-4UhXDpks5uFv-hgaJpZM4PyEnm>
.
--
- Ron Royston
(318) 560-0145
https://rack.pub
|
I'm also having the same issue. My scenario is after logging out I redirect to the login page and the snackbar shows a "successfully signed out" message but it gets stuck. My guess is that my login's username field has an |
### Issues fixed * Fixes #4005 (via new `mdc-snackbar-viewport-margin()` mixin) * Fixes #3981 * Fixes #2916 (via new `MDCSnackbar:closing` and `MDCSnackbar:closed` events) * Fixes #2628 * Fixes #1466 (via new `close()` method) * Fixes #1398 * Fixes #1258 * Fixes #11 (the label now expands indefinitely to fit the text) * Refs #2813 ### Screenshots ![Baseline without action button](https://user-images.githubusercontent.com/409245/49956261-a080ca80-feb9-11e8-8287-b7e805344115.png) ![Baseline with action button](https://user-images.githubusercontent.com/409245/49956109-4a138c00-feb9-11e8-9213-3241fa86a1b8.png) ![Stacked layout](https://user-images.githubusercontent.com/409245/49956173-6a434b00-feb9-11e8-8a03-2e58ccc8f763.png) BREAKING CHANGE: Snackbar's DOM and APIs have changed to match the latest design guidelines. See the Snackbar documentation for more information.
What MDC-Web Version are you using?
0.22.0
What browser(s) is this bug affecting?
Chrome (Version 61.0.3163.100 (Official Build) (64-bit))
User agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36"
What OS are you using?
macOS Sierra (version 10.12.6)
What are the steps to reproduce the bug?
What is the expected behavior?
The snackbar should close.
What is the actual behavior?
It doesn't close.
Any other information you believe would be useful?
I was digging through the Snackbar component and found out that it gets focus when switching tab to the tab that is showing the snackbar. When it has focus, it doesn't close (expected behaviour). The blur handler should then kick in when moving focus to some other element, but AFAIK the blur handler doesn't trigger any more. I am not sure yet why. The blur handler does kick in when performing the steps above, but clicking the "Show" button only once at step 3.
Besides the actual bug I'd also like to know why the Snackbar gets focus when switching tab? Shouldn't it just continue (or restart) the snackbar timer for closure?
EDIT:
Found a dirty workaround: manually set the snackbarHasFocus variable to false when the visibility change handler is triggered (make sure the MDC visibility change handler is run first by using setTimeout as it sets the snackbarHasFocus variable to true...) and there is a Snackbar queue.
The text was updated successfully, but these errors were encountered: