select input doesn’t work properly with ember-cli

[PDXIII]

Hello!
I don’t know why but it is somehow broken. When I submit a form with an select element, it always returns the default selection and if I add the browser-default class it converts it to the material select anyway.

When I disable the javascript-foo and change the css manually to the default, it works alright!

Maybe you can fix this, because I would like to use it so badly ;-)

System-Info:

OSX 10.9.5
Ember: 1.9.1
Ember Data: 1.0.0-beta.14.1
Handlebars: 2.0.0
jQuery: 2.1.3
Materialize: 0.93.1

Please take a look at this gist.

As you can see, I have a route called contactform which handles the final submission or cancelation.
Inside contactform there is the component contactform-component which collects all the input data and sends this to the controller of contactform.

I also filed this issue in the original MaterializeCSS repo.

[sgasser]

Hi,

this is not a bug in ember-cli-materialize.
I think this is the same bug like Dogfalo/materialize#466

[brendanoh]

For anyone working in ember-cli-materialize who finds this issue in the future here is how I solved the re-rendering of the select. Wrap it in a {{#with}}{{/with}}.

 {{#with filteredBusinessTypes as |types|}}
  <div class="row">
    <div class="input-field col s12">
      {{md-select content=types value=businessType label="Specific Business Type" prompt="Please choose..." optionLabelPath="content.name" optionValuePath="content"}}
    </div>
  </div>
 {{/with}}

Without the with it never updates. With it - it does.

[mike-north]

Thanks for the workaround @brendanoh

[brendanoh]

But let's be honest @truenorth, this 'workaround' shouldn't be needed. No one is going to be able to pick this up and use it the 'ember way' without digging around for this fix.

Regardless of just being a wrapper around Dogfalo/materialize I would expect this implementation to work from the get go.

[eahmedshendy]

@brendanoh
I'm using ember-cli-materialize, and I did this
{{view "select" content=windows_ids value=selectedId}}

I still can't see the select in the page. I see it in the HTML output, but it's not appeared in the browser.

[mike-north]

Agree @brendanoh - the select component needs to be re-written

[work4manish]

HI Mike
I am using select component
//setupContorller
let content = [{
"id": "system",
"title": "System"
}, {
"id": "amount",
"title": "Amount(USD)"
}, {
"id": "status",
"title": "Status"
}];

controller.setProperties({
  contents: content,
  content: 'notionalamount',
});

Template
{{md-select content=contents value=content label="Summary View By" prompt="..." optionLabelPath="content.title" optionValuePath="content.id" class="col s6"}}

When click on select box nothing is happening, I am only able to see Systems in input field and after clicking nothing is opening. Here http://mike.works/ember-cli-materialize/#/forms it is working fine.

Could you please help me out how to get out form this problem.