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

Update to stimulus-use debounce broke remote data load #892

Open
raivil opened this issue Feb 28, 2023 · 0 comments
Open

Update to stimulus-use debounce broke remote data load #892

raivil opened this issue Feb 28, 2023 · 0 comments

Comments

@raivil
Copy link

raivil commented Feb 28, 2023

Hi,

Not sure this is specific to tributejs or stimulus-use, but I'm creating a bug here to assist anyone that faces the same issue.
If this is not the correct repo, I'll create a new issue.

How can we reproduce this bug?

Setup stimulus-use (0.51.2 or later) to use debounce (https://github.com/stimulus-use/stimulus-use/blob/main/docs/use-debounce.md) and tributejs ("^5.1.3") with remote data loading.

What did you expect to happen?
Remote endpoint to be called and results to show up.

What happened instead?
Errors when debounce is in action.

this.tribute = new Tribute({
      menuContainer: this.editorTarget.closest(".FormControl-input-wrap"),
      noMatchTemplate() {
        return '<span style:"visibility: hidden;"></span>';
      },
      collection: [
        {
          trigger: "@",
          allowSpaces: true,
          lookup: "full_name",
          menuShowMinLength: 1,
          menuItemLength: 10,
          menuItemTemplate(item) {
            return `<img src="${item.original.avatar_src}"> ${item.original.full_name}`;
          },
          values(text, cb) {
            self.fetchUsers('/user/mentions', text, (users) => cb(users));
          },
        },
      ],
    });

async fetchUsers(url, text, cb) {
    const response = await get(url, {
      responseKind: "json",
      query: { q: text },
    });

    if (response.ok) {
      const json = await response.json;
      cb(json);
    } else {
      cb([]);
    }
  }
index.js:979 Uncaught TypeError: Cannot create property 'params' on string '/user/mentions'
    at index.js:979:47
    at Array.forEach (<anonymous>)
    at s (index.js:979:18)

image

References
Changes in stimulus-use/stimulus-use#252 (added to version 0.51.2) caused the issue.
Previous version didn't account for params, which now causes the issue.
https://github.com/stimulus-use/stimulus-use/pull/252/files#diff-2d00fb15509596cae3f1913138475788a64fdffda4c1fdc29b0637c6b807c04d

Created an issue on stimulus-use as well: stimulus-use/stimulus-use#295

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant