[MdSelect] not rendering correctly with backend service

[emman27]

Steps to reproduce

Have an md-select with options coming from an endpoint. Options load correctly, values load correctly but doesn't display in the select box.

Which browser?

Chrome 62, Ubuntu 16.04

VueMaterial 1.0.0-beta-7

What is expected?

What is actually happening?

As can be seen, the v-model is correctly loading but the field remains empty (here this select in particular is a multiple, but it's also broken for the single selects)

Reproduction Link

Simplest repro:

<template>
  <md-field>
    <label>Payment Modes <span class="red">*</span></label>
    <md-select required v-model="paymentModes" multiple>
      <md-option v-for="option in options" :key="option" :value="option">{{option}}</md-option>
    </md-select>
  </md-field>
</template>

<script>
export default {
  data() {
    return { options: [] }
  },
  async mounted() {
    this.options = await someApiCall();
    this.selected = await anotherApiCall();
  }
}
</script>

[Samuell1]

Hey, can you try calling api before rendering? in created hook?

[emman27]

@Samuell1 Thanks for the suggestion. Didn't work though.

[Samuell1]

@emman27 do you get any errors in console?

[Samuell1]

Tested it in created hook with fake api call and works https://codepen.io/anon/pen/eeoYpJ?editors=1010

Can you try removing async/await ?

[emman27]

The only thing in console is

[Violation] Forced reflow while executing JavaScript took 40ms

Which I believe means nothing.

Seems like it might potentially be a browser issue. Check this out! (I'm not actually pressing anything)

I swapped the async statement out for a Promise (then...catch) implementation and it didn't work either.

[Samuell1]

yeah i had that infinite reloading few days ago too, try restarting browser @emman27

[emman27]

Ah I see. I think we have a bit of miscommunication. Here's the updated pen. (Sidenote: didn't work restarting browser/system, I just switched to another browser)
https://codepen.io/anon/pen/jaREaL?editors=1010#anon-login

[Samuell1]

You cant set v-model for that value that is not in array.

[emman27]

Whoops silly me. Doesn't change the outcome though. Same result even if it's in the array

[Samuell1]

I tested it without timeout nad works fine. https://codepen.io/anon/pen/QOPeyN?editors=1010

@emman27 do you have any loading on page? try showing select only after its loaded from api

[emman27]

@Samuell1 Hey great idea it works!

Proposing to keep this issue open until a permanent fix?

[Samuell1]

Yes i leave it open. I now updating project to new vue-material and selects works fine with loading, thats why i ask if you have loading there to prevent rendering before its api loaded.

[Samuell1]

Tested it with v-if and it works: https://codepen.io/anon/pen/qVGvYm?editors=1011

[emman27]

Proposing to leave issue open as low priority since it has to do with reactivity of the VueMaterial components.

[Samuell1]

I found out it can be because stringValue is generated from select items if there is nothing selected value is set to empty. Best to fix this is to add loading like i said some messages on top.

Without loading:

With loading:

Source: https://github.com/vuematerial/vue-material/blob/dev/src/components/MdField/MdSelect/MdSelect.vue#L227

[andershjort]

I have an issue that I think is the same as this, but mine is with regards to "multiple" MdSelect.

CodePen: https://codepen.io/andershjort/pen/qpoeyq

I am not showing the select until after the data is loaded, but it still does not render correctly. The checkboxes in the dropdown are not checked

[VdustR]

MdSelect fetch the options to data MdSelect.items on mounted. After mounted, the menu close and MdSelect can not detect the slots update. The easy way to fix this issue is replacing v-if with v-show to make slot mounted then MdOptions could update and modify MdSelect.items. It is a bad idea because it will make all menu content DOM mounted round over its life cycle. Another solution is rendering and hiding the slots outside mdMenuContent and append slots into it only when menu is opened like a portal and append it back before the menu close. I can't find a way to execute MdOption methods without render it yet. I think it's necessary to always render slots if we want MdOptions modify MdSelect.items themselves.