Skip to content
This repository has been archived by the owner on Jun 10, 2023. It is now read-only.

Mdl-Select click issue #46

Open
max-yilang opened this issue Jun 30, 2016 · 14 comments
Open

Mdl-Select click issue #46

max-yilang opened this issue Jun 30, 2016 · 14 comments

Comments

@max-yilang
Copy link

I found out that if you push new data to the array that :options pointed to,clicking an element in the select doesn't close the select box. Is there any way to solve this issue?

@posva
Copy link
Owner

posva commented Jul 4, 2016

Sorry for not answering. I completely forgot 😓
This is a real issue because at the moment the mdl menu is created only once and therefore any menu item added afterwards doesn't work properly

@jamiedumont
Copy link

I thought I'd add my ++ for reference. I'm too having this issue, and can't find a way to resolve it.

@posva
Copy link
Owner

posva commented Aug 17, 2016

I think I should rethink the way mdl-menu handles options. I may end up doing something like mdl-tabs but this one is more complicated

@kyoukhana
Copy link

I encountered this problem as well. I think if we load the lists dynamically there should be a option to re-bind the click on the options. It seems like its a binding issue on click. Also if you are pulling a list from the database the column name in the database has to be value.

@devomacdee
Copy link

Has this been resolved? I'm having this same issue still.

@posva
Copy link
Owner

posva commented Feb 15, 2017

ATM you need to manually handle it for dynamically added options: https://jsfiddle.net/posva/rc1u7ouc/
Basically you need to call a handler on click:

   handleClick (e) {
    	this.$refs.menu.$el.MaterialMenu.handleItemClick_(e)
    }

The example below is for Menus

@sofanisba
Copy link

<mdl-select label="Category"
                  id="category"
                  v-model="category"
                  :value="category"
                  :options="categories">
</mdl-select>

The example given above binds the handleClick event to a child component of the menu. In this case the :options list items would be the thing with an event binding, but those are only referenced in the mdl-select tag. Any suggestions as to how one would add that click handler to a stock mdl-select component's child elements?

@posva
Copy link
Owner

posva commented Feb 15, 2017

I think the select component could probably be updated to handle the click itself: https://github.com/posva/vue-mdl/blob/develop/src/select.vue#L36

the select is a hack after all

@sofanisba
Copy link

Yeah, my last-ditch effort is to fork it and change the <li> event handler, but I figured I'd see if there was some clever on the fly fix. 👍

@posva
Copy link
Owner

posva commented Feb 16, 2017

Make sure to share it as a PR if you add it 🙂

@AliShaikh94
Copy link

Was there a fix for this?
Even on the doc website the select component is broken :(

@posva
Copy link
Owner

posva commented Mar 21, 2017

It doesn't work because I forgot to update the docs at https://github.com/posva/vue-mdl/blob/develop/doc/src/views/Selects.vue for Vue 2 but there's a working example at https://github.com/posva/vue-mdl/blob/develop/test/components/Select.vue
I'm open to a PR for that

@AliShaikh94
Copy link

Yeah I saw that and got it working from there.
I've fixed it locally in the docs, did you want me to create a new branch and then send a PR from there?

@posva
Copy link
Owner

posva commented Mar 21, 2017 via email

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

7 participants