Menu selected event is fired twice about material-components-vue HOT 5 CLOSED

The issue is caused by the List component, see c24f7c8. It used to have these lines in mounted():

if (this.$parent.$options._componentTag !== 'm-menu') {
  this.mdcList = MDCList.attachTo(this.$el)

This line was deleted, so now you have to set the js prop to false to ensure it doesn't instantiate the MDCList component. Except this causes a JavaScript error here:

onAction (e) {
  this.$emit('change', this.mdcList.selectedIndex)

since this.mdcList is not instantiated.

from material-components-vue.

@ErikMinekus Thanks for finding the issue! Feel free to submit a PR 👍

from material-components-vue.

@ErikMinekus So sorry that I made a mistake in previous versions. JavaScript component is optional in some components like List in mdc-web. That's why js is introduced. And some components like Menu, Drawer and Tab Bar can instantiate their children component, which may cause duplicate instantiation. I've fixed this issue in Tab Bar in #443 and discuss some solutions in #113. But there's still lots of work to do on the other components including Menus. Excuse for any mistakes in my explanations and feel free to help or submit a PR.

from material-components-vue.

@tychenjiajun I'm relatively new to Vue and Material components, but I think for Menu it would be best to just hardcode <ul class="mdc-list"> in the Menu component, like in the enhanced Select. This would be a breaking change, but at least people can't forget to set js to false.

I'm not familiar with how Drawer and TabBar can instantiate child components, so I can't comment on that. But it should be documented when you have to set js to false.

from material-components-vue.

@ErikMinekus In the enhanced Select, List is hardcoded to make enhanced reactive. So I think it's better to keep it hardcoded in mdc-web version 3.x.x. Since 4.0.0, the basic Select is deprecated and only enhanced Select is kept. So our enhanced will be deprecated too. I thinks it's ok to introduce more breaking change when updating to mdc-web 4.0.0 so Select will be changed to the same style as what Menu is now.

Whatever, thank you for this issue and PR!

from material-components-vue.