tribute icon indicating copy to clipboard operation
tribute copied to clipboard

Stop propagation when user hits enter

Open exzib opened this issue 4 years ago • 2 comments

How can we reproduce this bug?

  1. Create an input with onkeyup listener.
  2. Attach tribute to the input.
  3. Select from mention suggestions using keyboard and hit enter.
  4. onkeyup event is triggered.
  5. What did you expect to happen?

I have an input which sends message when user hits enter. I want to add @mention capability so when user selects from the list, it is appended to the text, but won't send the message. So I either need an event which will help me stop my event or your library should stop propagation. Can this be done?

example code of my input:

              <vue-tribute :options="tributeOptions">
                <input type="text" placeholder="Send A Message" class="form-control" v-model="message" v-on:keyup.enter="sendMessage" id="chat_input"></input>
              </vue-tribute>
    sendMessage() {
        let response = axios.post('chat/send', {message: this.message, channel: this.channel}).then((response) => {
          this.message = '';
          if(response.data.success == false) {
            this.$toastr.e(
              response.data.message
            );
          }
        });
    },

exzib avatar Sep 01 '20 20:09 exzib

The solution is simple:

if (tribute.isActive && tribute.current.filteredItems) 
    return;

Ionys320 avatar Feb 22 '21 15:02 Ionys320

Not sure how I can access tribute in scope. Can someone show example with vue-tribute

naydenovAnton avatar Jun 15 '22 09:06 naydenovAnton