Material Select - popper TypeError on drop down - Material Design for Bootstrap

Topic: Material Select - popper TypeError on drop down

shamca free asked 5 years ago

my JS include file:

//= require mdb/jquery-3.3.1.min
//= require mdb/popper.min
//= require mdb/bootstrap.min
//= require mdb/mdb.min
//= require mdb/addons/datatables.min
//= require mdb/modules/material-select

My JS init:

  $(function(){
    $('.mdb-select').materialSelect();
  });

My HTML:

    <div class="col-lg-4">
        <div class="md-form input-group dropdown mdb-select dropdown-primary">
          <select name="event[type]" id="mdb-select" >
            <%= options_for_select(Event::EVENT_TYPES.map {|v, k| [v, k]}, selected: @event.type) %>
          </select>
        </div>
      </div>

The control appears, but when I click the arrow , but Chrome says:

TypeError: Cannot read property 'setAttribute' of null at Object.onLoad (popper.min.self-3c7281b46f0001ba8f8cca64e07ecf419eb1a83a5d8d25e53cfdda45ab305b8d.js?body=1:5)

mdb.js version 4.7.0
popper.js version 1.14.7
ruby version 2.4.4
rails version 4.2.2
Chrome : latest

Add comment

shamca free answered 5 years ago

1 0 Best answer

Well, this is strange. The JS console usually shows a waves init error on this line in mdb.js which I read can be ignored if one isn't using the wave effect...and in another project, it seemed to not be a problem to ignore:

body.addEventListener('mousedown', showEffect, false);

(mdb.js line 15411)

Today, I commented out the line and now popper & my material select are happy.

Shaun

Sebastian Kaczmarek staff commented 5 years ago

Glad you found the solution. Anyway, I'm adding this issue to the Bugs list. It'll be fixed soon.

Add comment

shamca free answered 5 years ago

1 0 Best answer

<p>Hi Sebastian - unfortuately not:</p>

<p>Here's the whole div:</p>

<p>Here's the full text of the error:</p>

<pre class="prettyprint"><code>popper.min.self-3c7281b46f0001ba8f8cca64e07ecf419eb1a83a5d8d25e53cfdda45ab305b8d.js?body=1:5 Uncaught TypeError: Cannot read property 'setAttribute' of null
    at Object.onLoad (popper.min.self-3c7281b46f0001ba8f8cca64e07ecf419eb1a83a5d8d25e53cfdda45ab305b8d.js?body=1:5)
    at popper.min.self-3c7281b46f0001ba8f8cca64e07ecf419eb1a83a5d8d25e53cfdda45ab305b8d.js?body=1:5
    at Array.forEach (<anonymous>)
    at new t (popper.min.self-3c7281b46f0001ba8f8cca64e07ecf419eb1a83a5d8d25e53cfdda45ab305b8d.js?body=1:5)
    at c.t.toggle (bootstrap.min.self-b5a2c0e4854829aee5d78771d842aa44f8b2e32bcc236822108f553e9a47d758.js?body=1:7)
    at HTMLInputElement.<anonymous> (bootstrap.min.self-b5a2c0e4854829aee5d78771d842aa44f8b2e32bcc236822108f553e9a47d758.js?body=1:7)
    at HTMLInputElement.dispatch (jquery-3.3.1.min.self-875821d1e3121b366b94ea86a07f3cbc5c76cb16a319bc62212c03a805ff20e9.js?body=1:3)
    at HTMLInputElement.y.handle (jquery-3.3.1.min.self-875821d1e3121b366b94ea86a07f3cbc5c76cb16a319bc62212c03a805ff20e9.js?body=1:3)
</code></pre>

<p>I'm wondering if I should roll back to 4.6.1 ?</p>

<p>Thanks,
Shaun</p>

Please insert min. 20 characters.

Hi Sebastian - unfortuately not:

Here's the whole div:

      <div class="col-lg-4">
          <select class="mdb-select" name="event[type]" id="mdb-select">
            <%= options_for_select(Event::EVENT_TYPES.map {|v, k| [v, k]}, selected: @event.type) %>
          </select>
      </div>

Here's the full text of the error:

popper.min.self-3c7281b46f0001ba8f8cca64e07ecf419eb1a83a5d8d25e53cfdda45ab305b8d.js?body=1:5 Uncaught TypeError: Cannot read property 'setAttribute' of null
    at Object.onLoad (popper.min.self-3c7281b46f0001ba8f8cca64e07ecf419eb1a83a5d8d25e53cfdda45ab305b8d.js?body=1:5)
    at popper.min.self-3c7281b46f0001ba8f8cca64e07ecf419eb1a83a5d8d25e53cfdda45ab305b8d.js?body=1:5
    at Array.forEach (<anonymous>)
    at new t (popper.min.self-3c7281b46f0001ba8f8cca64e07ecf419eb1a83a5d8d25e53cfdda45ab305b8d.js?body=1:5)
    at c.t.toggle (bootstrap.min.self-b5a2c0e4854829aee5d78771d842aa44f8b2e32bcc236822108f553e9a47d758.js?body=1:7)
    at HTMLInputElement.<anonymous> (bootstrap.min.self-b5a2c0e4854829aee5d78771d842aa44f8b2e32bcc236822108f553e9a47d758.js?body=1:7)
    at HTMLInputElement.dispatch (jquery-3.3.1.min.self-875821d1e3121b366b94ea86a07f3cbc5c76cb16a319bc62212c03a805ff20e9.js?body=1:3)
    at HTMLInputElement.y.handle (jquery-3.3.1.min.self-875821d1e3121b366b94ea86a07f3cbc5c76cb16a319bc62212c03a805ff20e9.js?body=1:3)

I'm wondering if I should roll back to 4.6.1 ?

Thanks, Shaun

Add comment

Sebastian Kaczmarek staff answered 5 years ago

0 1 Best answer

The .mdb-select class should be placed directly on the <select> element and not on the parent div wrapper, like this:

<select class="mdb-select" name="event[type]" id="mdb-select">
    <%= options_for_select(Event::EVENT_TYPES.map {|v, k| [v, k]}, selected: @event.type) %>
</select>

Does it help you?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.6.1
Device: Desktop
Browser: Chrome
OS: Mac OS
Provided sample code: No
Provided link: No

shamca

173Support score
8Questions 11Answers 0Snippets