yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.49k stars 431 forks source link

Pasting into autocomplete/suggestion box doesn't fire 'input' event -- Possible workaround given in jsbin #1294

Closed jzohrab closed 7 months ago

jzohrab commented 7 months ago

Prerequisites

Description of issue and demo of possible solution

Users wanted a "paste" to still open the ajaxed whitelist. As it is, paste doesn't fire the 'input' event, so the whitelist wasn't getting opened. After some playing, I came up with a workaround solution in the JS bin demo:

https://jsbin.com/zadaded/edit?html,js,output

I'd like to make sure that this solution isn't completely ridiculous -- I may have missed something in the docs, though I read through everything.

Solution notes

Essentially this required adding a paste hook:

      // Use a hook to fire the onInput event!
      // Pasting from the clipboard doesn't fire the
      // tagify.on('input') event, so intercept it and handle
      // it manually.
      hooks: {
        beforePaste : function(content) {
          return new Promise((resolve, reject) => {
            clipboardData = content.clipboardData || window.clipboardData;
            pastedData = clipboardData.getData('Text');
            console.log("pasting => " + pastedData);
            let e = {
              detail: { value: pastedData }
            };
            onInput(e);
            resolve();
          });
        }
      },

With the hook active, the paste opened the whitelist as expected:

image

Without the hook, paste would just paste the value:

image

If this is a reasonable solution, I'm happy to post a patch to the README.md.

Thanks @yairEO !

yairEO commented 7 months ago

I've just released v4.20 which includes a paste event listener:

const tagify new Tagify(...)

tagify.on('paste', e => console.log(e))

In your case you can listen to both input & paste events together:

tagify.on('input paste', e => console.log(e))