PaperRipple Error
devotox opened this issue · comments
Not sure if this is due to being in an Ember Engine or not but using beta.27 throws this error locally
engine-vendor.js:15071 Uncaught (in promise) TypeError: Cannot read property 'classList' of null
at PaperRipple.setupContainer (engine-vendor.js:15071)
at Object.installModifier (engine-vendor.js:501)
at vendor.js:23902
at untrack (vendor.js:27685)
at InteractiveCustomModifierManager.install (vendor.js:23902)
at Transaction.commit (vendor.js:63198)
at Environment$1.commit (vendor.js:63269)
at Environment$1.commit (vendor.js:19467)
at InteractiveRenderer._renderRoots (vendor.js:21090)
at InteractiveRenderer._renderRootsTransaction (vendor.js:21120)
@devotox what ember version are you running?
Also, on what component is this happening? A button? Menu?
ember-cli: 3.16.0
http_parser: 2.9.3
node: 10.19.0
v8: 6.8.275.32-node.55
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.39.2
napi: 5
openssl: 1.1.1d
icu: 64.2
unicode: 12.1
cldr: 35.1
tz: 2019c
os: darwin x64
npm: 6.13.4
yarn: 1.22.0
I'm interested in the ember-source
version.
ember-source: 3.16.3
And this was within a list element
<div class="md-no-style md-list-item-inner">
<div class="md-list-item-text layout-column">
<img class="md-avatar" alt="Default Profile" src="/assets/images/default/user-default-image.png">
</div>
<div class="md-list-item-text layout-column">
<h3>
Not logged in
</h3>
</div>
<!--% %-->
<div class="md-ripple-container"></div>
</div>
@devotox ok, ember version looks good.
Was that markup rendered using {{#paper-list ...}}
?
And does the error only happen when you click the item?
What is the template?
This list is part of the sidenav using the sidenav component.
It happens on render and not on click
<PaperList>
<PaperItem
class="layout-row layout-align-center-center profile-image-wrapper"
{{on "click" (fn this.global.transition "account")}}
>
{{#if this.session.isAuthenticated}}
<div class="md-list-item-text layout-column">
<img
class="md-avatar"
alt={{this.session.data.authenticated.profile.name}}
src={{this.session.data.authenticated.profile.picture}}
/>
</div>
<div class="md-list-item-text layout-column">
<h3>
{{this.session.data.authenticated.profile.name}}
</h3>
<h4>
{{this.session.data.authenticated.profile.email}}
</h4>
</div>
{{else}}
<div class="md-list-item-text layout-column">
<img
class="md-avatar"
alt="Default Profile"
src={{this.navigation.profile.image}}
/>
</div>
<div class="md-list-item-text layout-column">
<h3>
{{this.navigation.profile.name}}
</h3>
</div>
{{/if}}
</PaperItem>
<PaperDivider />
{{#each this.navigation.links as |link|}}
{{#if
(and
(not link.hide)
(or
(and
this.session.isAuthenticated
(not-eq link.authenticated false)
)
(and
(not this.session.isAuthenticated) (not link.authenticated)
)
)
)
}}
<PaperItem
class={{if (eq link.route this.currentTopRouteName) "active"}}
{{on
"click"
(queue
(optional
(if link.route (fn this.global.transition link.route))
)
(optional
(if link.action (fn (get this.global link.action)))
)
)
}}
>
<PaperIcon @icon={{get link "icon"}} />
<span>
{{link.name}}
</span>
</PaperItem>
{{/if}}
{{/each}}
</PaperList>
It's not advised to use {{on "click" ...}}
modifier.
PaperItem
renders itself differently depending on if you pass in @onClick
or an @href
.
To my knowledge, there's no way to know if you were passed in a modifier/attribute. So the only hope is regular arguments.
Still, you shouldn't see that error, I think.
Can you try:
Tried it with @onClick
and @href
I removed the full list and found there were problems with PaperList
even if not rendered due to an {{#if ...}}
statement. Also, an issue with PaperSelect
and just to throw it all for a loop does not seem to happen in a prod environment. Could it be a race condition?