Multi-Select Dropdown (Tag Box): It's impossible to select more than one option if the question was created using the `QuestionTagboxModel` constructor

[budang]

Are you requesting a feature, reporting a bug or asking a question?

Reporting a bug

What is the current behavior?

Creating a tagbox question using the Survey.QuestionTagboxModel constructor and setting its individual properties only allows you to select one option from the dropdown:

This is fixed by calling the fromJSON method before setting individual properties:

What is the expected behavior?

The fromJSON method should not need to be called. The overall expected behavior is to be able to select multiple options from the dropdown.

How would you reproduce the current behavior (if this is a bug)?

See the test code/link.

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://plnkr.co/edit/HJzbNHTp2gx0XFYQ

Test code:

function SurveyComponent() {
    const questionDetails = json.elements[0];

    const question = new Survey.QuestionTagboxModel(questionDetails.name);
    // question.fromJSON({}); // fixes the bug
    question.isRequired = questionDetails.isRequired;
    question.choices = ["CountryA", "CountryB", "CountryC"];
    question.title = questionDetails.title;
    question.description = questionDetails.description;

    const page = new Survey.PageModel(page);
    page.addQuestion(question);

    const survey = new Survey.Model({});
    survey.addPage(page);

    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<SurveyReact.Survey model={survey} />);
}

const root = ReactDOM.createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);

Specify your

• browser: Chrome, FireFox
• browser version: Version 124.0.6367.62 (Official Build) (x86_64) (Chrome), 124.0.2 (64-bit) (FireFox)
• surveyjs platform (angular or react or jquery or knockout or vue): ReactJS
• surveyjs version: 1.9.138, 1.10.1

[wesgill]

Here is an updated version of the Plunker that shows the behavior side-by-side: https://plnkr.co/edit/d9ViyTAuYcvlaRuD