search

DCzajkowski / vue-emoji-picker

Very simple, yet powerful, vue emoji picker 🎉🔥🚀
MIT License
332 stars 49 forks source link

Emoji-invoker not working with Vue > 2.6 #9

Closed yizen closed 5 years ago

yizen commented 5 years ago

Hi,

I have run into an issue updating to Vue 2.6 : the events are not being passed to the EmojiPicker.

In 2.6, scoped slots have been reworked, and slot-scope has been deprecated.

https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

This pen demonstrate it :

https://codepen.io/Yizen/pen/VgrbJO

It is basically the exact clone of your pen, but with Vue upgraded to 2.6

Thank you for this component, and any help you can provide.

DCzajkowski commented 5 years ago

To be honest I tried, but I can't get it to work. There must have been a bug introduced, or I can't grasp what is not working :/

yizen commented 5 years ago

My understanding is that v-on on slot was never very well supported. There is a discussion about it here : https://github.com/vuejs/vue/issues/4781

DCzajkowski commented 5 years ago

This doesn't seem to be an issue. I have made a click handler and it didn't work either. Maybe there is an issue with passing arrow functions in a template? Frankly, I have no idea how to debug it 😕

timroosen commented 5 years ago

We ran into the same issue today with vue 2.6.3. It doesn't seem to be an issue with the slots. The slots are not yet deprecated from v2.6. After some debugging we found out that v-click-outside is called right after the this.toggle() preventing the Emoji picker to show. using e.stopPropagation(); in your click handler should prevent this behaviour.

DCzajkowski commented 5 years ago

I can confirm, that it's two things, that need to be changed:

  1. The component cannot return an arrow function. It has to be the component's method itself
  2. The .stop modifier is required (but I have no clue why)
yizen commented 5 years ago

Thanks for the feedback, here is the corrected CodePen for future reference :

https://codepen.io/Yizen/pen/wNYPVx

@click="clickEvent"

should be corrected for Vue > 2.6 to :

@click.stop="clickEvent"

LTFENG commented 5 years ago

thanks, I noticed this error too when I update my vue project to 2.6+.

Would like to ask how do you guys debug for this ? Would like to know how can I think like you guys in order to debug some similar case in future.

thanks @Yizen, @DCzajkowski and @timroosen