Hello,
I'm using a tagbox which looks something like this :
JavaScript{
name: "redis_keys_prefix",
title: "Keys prefix",
allowAddNewTag: true,
clearIfInvisible: "none",
isRequired: true,
type: "tagbox",
choicesByUrl: {
url: "www.somGetApiUrl.com"
},
allowAddNewTag: true,
maxSelectedChoices: 1,
},
Let's consider the result of the api is as follows : ["a", "b", "c"]
This works fine whenever I select a value that is sent by the API (ex: "a") however, as soon as I select anything that isn't from the API's choices (which I allowed), if I change change and come back or if the submit of the form fails (ex: a validation error), the displayed value disappears (and doesn't get reset from the "value" of the field which can cause some errors).
I have tried to counter that by simply adding, like when I used the DevExtreme tagBox, the value to the choices
field of the question, however although this works for regular choice configuration choices: `["a", "b", "c"]
, it doesn't seem to work for the choicesByUrl
.
As a base example, here is the code I wrote to handle regular choices
rather than choicesByUrl
which works fine for the first case but not the second :
JavaScript// If not implemented, there will be an issue for new tags if we change page or fail to submit
form.onValueChanged.add((survey, options) => {
const q = options.question;
// Tagbox - add option to choices if not already available
if (q.customWidgetValue && q.customWidgetValue.name == "tagbox" && q.allowAddNewTag) {
const choicesByUrl = q.choicesByUrl.loadingOwner.choicesFromUrl
? q.choicesByUrl.loadingOwner.choicesFromUrl.map(value => value.propertyHash.value)
: [];
const choicesCustom = q.choices
? q.choices.map(value => value.value)
: [];
const values = q.value.map((value) => {
if (typeof value == 'string') {
return value;
}
});
const mergedChoices = [...new Set( choicesByUrl.concat(choicesCustom, values) )];
// console.log(mergedChoices);
if(!choicesByUrl.includes(q.value) && !choicesCustom.includes(q.value)) {
q.choices = mergedChoices;
}
}
})
Thanks a lot in advance for your help and if you need any additional detail please say so and I'll get back to you asap with it.
Best regards,
Yves