[Feature Request] Emoji Picker with Text Field

[creativenoobie]

Problem to solve

I'm using emoji-mart-vue as an emoji picker component as of right now. Though it works, but I can't position it in respect to append-icon prop since it causes overflow problem and other issues as well. Also, I can't insert emoji to text-field via javascript. (emoji-mart-vue has onSelect event but vue do not update text field in sync). I am using following method as of right now in order to insert text:

methods: {
      addEmoji(emj){
        this.profile.status += emj.native;
      }
    }

With this code, I need to close the picker component in order to add emoji to the text field. Not to mention that it doesn't respect cursor position in text field.

I believe we all live in world of emojis where we use emojis not just to represent our emotions but actions as well. And I do feel, This feature is a perfect add-on for FrontEnd pack.

Proposed solution

Either we can integrate emoji-mart-vue with Vuetify or maybe we can extend text-field to support v-dialogs as callback with absolute position. And also, I was wondering if we could introduce .sync modifier to insert text via methods?

[dmecke]

I'd also like to have something like this supported out of the box, but I think this was already denied in #2304.

[creativenoobie]

@dmecke I wonder if there's any way to add a modal dialog instead of icon to text-fields. I guess that would solve half of the problems.

Next problem would be inserting text at cursor position via methods.

[creativenoobie]

If a dev or anyone experienced enough could guide me, I think I can write the code for a hack or something.

[dmecke]

You could use a text field with an icon (https://vuetifyjs.com/en/components/text-fields#example-icon) and open a dialog when the user clicks on the icon. When the user selects an emoji in the dialog, you add the emoji to the property that is the model of your text field.

[phaitonican]

would really love to see this too, since most picker repos are made for text fields and most of them need a work around for vuetify, because they can not work with v-text-field.

[creativenoobie]

@johnleider Can you please reconsider this? Icon with @click:append will do the trick but I am not able to insert emoji at current cursor position. maybe a function to insert text manually at cursor position?

[johnleider]

Could someone here provide some sort of example of the functionality you are looking for?

[creativenoobie]

Functionality: Adding text to current cursor position.

For example: There's a text field with text:Hello World And I want to insert from between Hello and World. So I would just make a method which might do that.

[KaelWD]

You mean like this? https://codepen.io/anon/pen/WgEdJz

[creativenoobie]

Exactly like this! Thank you so much! :) I'll try to make an emoji picker now. I'll share my code soon.

On Wed, Sep 5, 2018 at 11:47 PM Kael notifications@github.com wrote:

You mean like this? https://codepen.io/anon/pen/WgEdJz

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/vuetifyjs/vuetify/issues/4299#issuecomment-418829547, or mute the thread https://github.com/notifications/unsubscribe-auth/AWcU4QYr2uYDE0_lShGPA8MGURIBx6VVks5uYBU5gaJpZM4UnzVp .

[BaroDevelopment]

Could someone here provide some sort of example of the functionality you are looking for?

https://codepen.io/DCzajkowski/pen/Brxvzj

[nekosaur]

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.

[jonashao]

Referring to Date picker, it's easy to achieve positioning a dialog like picker aside a text field or text area.

This is a demo snippet, we can implement our emoji picker in a standalone component.

           <v-menu
              ref="menu"
              v-model="menu"
              top
              transition="scale-transition"
              offset-y
              min-width="290px"
            >
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  icon
                  medium
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon>mdi-sticker-emoji</v-icon>
                </v-btn>
              </template>
              <emoji-picker
                @emoji-picked="emojiPicked"
              />
            </v-menu>

After picking an emoji, we can insert the picked one into the text field or text area. We may need to concern about the cursor's position, here is the handler js functions.

      insertIntoCursorPosition (insertText) {
        const textarea = this.$refs.textarea.$refs.input
        const sentence = textarea.value
        const len = sentence.length
        let pos = textarea.selectionStart
        if (pos === undefined) {
          pos = 0
        }
        const before = sentence.substr(0, pos)
        const after = sentence.substr(pos, len) || ''

        this.messageForm.content = before + insertText + after
        this.$nextTick().then(() => {
          textarea.selectionStart = pos + insertText.length
          textarea.selectionEnd = pos + insertText.length
          textarea.focus()
        })
      },

      emojiPicked (emoji) {
        this.insertIntoCursorPosition(emoji)
      },