I'm not able to show emoji picker from external button

[jpujol880807]

Hi, let say i want to show the emoji picker content on a modal, to make it compatible with my template, and i wan't to trigger it from a button, but i don't want this button near the emoji picker component. Something like this. `

... Content Here ..... ` And them from the external button i want to simply show the modal. So i would like to have display: {x: 0, y:0, visible: true} allways Can't place it near emoji-picker because is wraped inside tricky html tags. I can't find a way of modify the slot scoped display property from parent

DCzajkowski commented 5 years ago

Could you please provide some example on CodePen or in any other online editor? Any screenshots/drawn concepts would be welcome.

n4ss1m commented 5 years ago

Hey @jpujol880807

I had the same issue displaying emoji list from an external button ( from outside the component ), and this is how I solved it, I added ref="EmojiOpen" attribute to 'emoji-invoker' slot to became like this :

<div slot="emoji-invoker" slot-scope="{ events }" v-on="events" ref="EmojiOpen"></div>

then added @click="$refs.EmojiOpen.click()" to my external button

<button @click="$refs.EmojiOpen.click()">Display emoji list</button>

Example: https://codepen.io/n4ss1m/pen/KJJaMN I hope this will help you!

jpujol880807 commented 5 years ago

Thanks a lot!!!, that works. Sorry for late response, I'm closing it.

DCzajkowski commented 5 years ago

Great it has been resolved 👍

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[DCzajkowski]

Could you please provide some example on CodePen or in any other online editor? Any screenshots/drawn concepts would be welcome.

[n4ss1m]

Hey @jpujol880807

I had the same issue displaying emoji list from an external button ( from outside the component ), and this is how I solved it, I added ref="EmojiOpen" attribute to 'emoji-invoker' slot to became like this :

<div slot="emoji-invoker" slot-scope="{ events }" v-on="events" ref="EmojiOpen"></div>

then added @click="$refs.EmojiOpen.click()" to my external button

<button @click="$refs.EmojiOpen.click()">Display emoji list</button>

Example: https://codepen.io/n4ss1m/pen/KJJaMN I hope this will help you!

[jpujol880807]

Thanks a lot!!!, that works. Sorry for late response, I'm closing it.

[DCzajkowski]

Great it has been resolved 👍