tribute
tribute copied to clipboard
Update to stimulus-use debounce broke remote data load
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)
References
Changes in https://github.com/stimulus-use/stimulus-use/pull/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: https://github.com/stimulus-use/stimulus-use/issues/295