PaperRipple Error

[devotox]

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)

[miguelcobain]

@devotox what ember version are you running?
Also, on what component is this happening? A button? Menu?

[devotox]

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

[miguelcobain]

I'm interested in the ember-source version.

[devotox]

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>

[miguelcobain]

@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?

[devotox]

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>

[miguelcobain]

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:

...
<PaperItem
  class="layout-row layout-align-center-center profile-image-wrapper"
  @onClick={{fn this.global.transition "account"}}
>
  ...

[devotox]

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?