Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MdSelect] not rendering correctly with backend service #1262

Closed
emman27 opened this Issue Dec 5, 2017 · 17 comments

Comments

Projects
None yet
4 participants
@emman27
Copy link
Contributor

emman27 commented Dec 5, 2017

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?

screenshot from 2017-12-05 15-55-18
screenshot from 2017-12-05 15-54-39

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

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 5, 2017

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

@emman27

This comment has been minimized.

Copy link
Contributor Author

emman27 commented Dec 5, 2017

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

@Samuell1

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 5, 2017

@emman27 do you get any errors in console?

@Samuell1

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 5, 2017

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

This comment has been minimized.

Copy link
Contributor Author

emman27 commented Dec 5, 2017

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)

ouch

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

@Samuell1

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 5, 2017

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

@emman27

This comment has been minimized.

Copy link
Contributor Author

emman27 commented Dec 5, 2017

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

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 5, 2017

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

@emman27

This comment has been minimized.

Copy link
Contributor Author

emman27 commented Dec 5, 2017

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

@Samuell1 Samuell1 added the bug label Dec 5, 2017

@Samuell1

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 6, 2017

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

This comment has been minimized.

Copy link
Contributor Author

emman27 commented Dec 6, 2017

@Samuell1 Hey great idea it works!

Proposing to keep this issue open until a permanent fix?

@Samuell1

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 6, 2017

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

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 7, 2017

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

@Samuell1 Samuell1 closed this Dec 7, 2017

@emman27

This comment has been minimized.

Copy link
Contributor Author

emman27 commented Dec 7, 2017

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

@Samuell1

This comment has been minimized.

Copy link
Member

Samuell1 commented Dec 11, 2017

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:
2017-12-11_10-42-27

With loading:
2017-12-11_10-43-39

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

@Samuell1 Samuell1 changed the title bug(MdSelect) not rendering correctly with backend service [MdSelect] not rendering correctly with backend service Jan 4, 2018

@andershjort

This comment has been minimized.

Copy link

andershjort commented Jan 11, 2018

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

This comment has been minimized.

Copy link
Member

VdustR commented Jan 17, 2018

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.

VdustR added a commit to VdustR/vue-material that referenced this issue Jan 26, 2018

fix(MdSelect): Reactive options
Make options reactive via a hidden node.

fix vuematerial#1262

marcosmoura added a commit that referenced this issue Jan 26, 2018

fix(MdSelect): Reactive options (#1447)
Make options reactive via a hidden node.

fix #1262
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.