Why material select clones the select element class list?

Considering a select element:

<select class="my-select">
   <!-- options -->
</select>

After initialized by material_select method the select class list is cloned in parent node:

<div class="select-wrapper my-select">
   <!-- (...) -->
   <select class="my-select">
      <!-- options -->
   </select>
</div>

Now the query selector .my-select I will get div.my-select instead of select.my-select and it is does not seem the right thing.

For example, considering a scenario that has a handler for registration and upgrade new components and each component is represented by its class. This behavior breaks the normal flow of application.

Every time the handler check for upgrade it will double the components infinitely.

e.g.

<select class="my-select">...</select>

// Registration.
handler.registerComponent({
  name: 'MySelect',
  cssClass: 'my-select'
});

// Handler will query for the css class and upgrade all elements.
// First time, will upgrade ok because ".my-select" means the select element. 
handler.upgradeComponent('MySelect');

Now the select element seems like this and handler knows that component is upgraded.

<div class="select-wrapper my-select">
   <!-- (...) -->
   <select class="my-select" data-upgraded="MySelect">
      <!-- options -->
   </select>
</div>

After, It will fail if need to check for upgrade:

// Now the handler will find "div.select-wrapper.my-select" instead of select element. 
handler.upgradeComponent('MySelect');

<div class="select-wrapper my-select">
   <!-- (...) -->
   <div class="select-wrapper my-select" data-upgraded="MySelect">
     <!-- (...) -->
     <select class="my-select" data-upgraded="MySelect">
         <!-- options -->
      </select>
   </div>
</div>

[ruinunes]

I found myself needing to replace the parent 'select-wrapper', with a newly cloned select element and after that run .material_select().

$existingSelects.on 'contentChanged', ->
  $select = $ this
  $select.parent('.select-wrapper').replaceWith $select
   @$select.material_select()

else, I would get a 'select-wrapper' inside another 'select-wrapper' much like:

This makes me want to use the browser-default class on the select elements instead.

[fega]

Closed due inactivity, feel free to reopen it if it is still necessary.