ember-paper: paper-select causes the app to become unresponsive

Occasionally (5 or 10% of the time) paper-select causes my app to become unresponsive.

When this occurs the #ember-basic-dropdown-wormhole contains both an md-backdrop element and a div for the dropdown content #ember-basic-dropdown-content-....

The content div returns the following from getBoundingClientRect(), making it invisible and unclickable:

{
  "x": 0,
  "y": 0,
  "width": 0,
  "height": 0,
  "top": 0,
  "right": 0,
  "bottom": 0,
  "left": 0
}

The md-backdrop element masks the rest of the app and does not respond to clicks making the app unresponsive. There are no errors in the console.

The only other unusual thing about this use case is that the drop down exists in a modal (which animates open) which has tabs (with animations between tabs). Could the animation of the parent context be causing this bug?

Related (?) Bugs

This was observed with both Ember 3.0.0 and 3.1 applications. ~~I’m also using paper-select with a 3.0 application and this behavior does not occur~~

I do sometimes experience two other issues which I’ll write up separately:

sometimes the options list appears a few hundred px above the expected location
sometimes the user has to click multiple times to make a selection

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 22 (18 by maintainers)

Commits related to this issue

Update some dependencies I found a few more that I think might have worked but then I got into some vortex of breakage, possibly the same mentioned here: https://github.com/miguelcobain/ember-paper/i... — committed to backspace/prison-rideshare-ui by backspace 6 years ago
Fix backdrop-bug when using multiple components that have an invisible background (like paper-menu) see issue #925 — committed to ruzz311/ember-paper by ruzz311 5 years ago
Update Ember, paper, buffered-proxy This has some failures that I’ve “fixed” with this hack: https://github.com/miguelcobain/ember-paper/issues/925#issuecomment-390653884 It has other test failures ... — committed to backspace/prison-rideshare-ui by backspace 5 years ago

Most upvoted comments

@panthony - I followed your lead with the transitionName and I’ve noticed my problems are gone.

I was noticing this issue intermittently but recently I’ve added quite a few components that would possibly use backdrop (sidebar, a paper-menu, etc). It wasn’t until I render multiple multiple menus that I really saw this happen reliably.

I’ve not really looked into how that backdrop is managed but just reporting my findings and confirming what @panthony commented above.

Tested On:

Chrome Version 72.0.3626.121 Ember | 3.3.2 Ember Paper | 1.0.0-beta.24

ruzz311 on Mar 21, 2019

I noticed that TransitionMixin does nothing if transitionName is missing so for now I did the following in my fork hoping that it will “workaround” the issue I have with paper-menu since I don’t really care for transition effect on an invisible div:

  // addon/components/paper-backdrop.js
  shouldTransition: bool('opaque'),
  transitionName: computed('shouldTransition', function() {
    // TransitionMixin is NoOp if transitionName is not given
    return this.get('shouldTransition') ? 'ng' : null;
  }),

panthony on Dec 27, 2018

My biggest struggle with this issue is how hard it was to reproduce. If someone can provide a way to consistently reproduce the issue, I’m willing to look into it with you (I’m ‘cbonser’ on the Ember community discord).

chbonser on Sep 13, 2018

I’ve upgraded to Ember 3.3 and can no longer create the issue. I don’t know for sure but I suspect that backburner’s ‘new microtask-based autorun architecture’ may have resolve the issue. It was included in ember since 3.2.0-beta.1.

Related backburner issue… https://github.com/BackburnerJS/backburner.js/issues/332

I’m going to close this issue for now. We can reopen it if someone experiences the issue with Ember 3.2+

chbonser on Aug 25, 2018

I built a cordova app using ember paper and I had to extend quite a few components to make it more mobile friendly, one of those components was paper-backdrop, because I too had the issue described before with the backdrop when opening and closing the sidenav, I thought it was because I added a Hammer swipe event listener to close/open the sidenav, something related to ghost clicks, but now that I see others with the issue I feel a little of relief “?”, to be honest I didn’t had much time to dig in, but I manage to solve it (not sure why) by extending the paper-backdrop and overriding the func addDestroyedElementClone(/original, clone/) {} notice there’s no this._super(…arguments). Hope it helps.

betocantu93 on May 19, 2018