Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
3 tasks done
jzohrab opened this issue Feb 9, 2024 · 1 comment

Comments

@jzohrab
Copy link
Contributor

jzohrab commented Feb 9, 2024

Prerequisites

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed

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
Copy link
Owner

yairEO commented Feb 11, 2024

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))

@yairEO yairEO closed this as completed Feb 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants