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

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

Closed
budang opened this issue Apr 29, 2024 · 1 comment · Fixed by #8211
Assignees
Labels
bug user issue An issue or bug reported by users
Milestone

Comments

@budang
Copy link

budang commented Apr 29, 2024

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:

Screenshot 2024-04-29 at 1 17 34 PM

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

Screenshot 2024-04-29 at 1 20 38 PM

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

wesgill commented Apr 29, 2024

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

@andrewtelnov andrewtelnov added bug user issue An issue or bug reported by users labels Apr 30, 2024
@andrewtelnov andrewtelnov self-assigned this Apr 30, 2024
andrewtelnov added a commit that referenced this issue Apr 30, 2024
novikov82 pushed a commit that referenced this issue May 2, 2024
…del (#8211)

* Cannot select more than one option when using Survey.QuestionTagboxModel
fix #8210

* Fix markup tests #8210
@andrewtelnov andrewtelnov added this to the v1.10.3 milestone May 2, 2024
@andrewtelnov andrewtelnov changed the title Cannot select more than one option when using Survey.QuestionTagboxModel Cannot select more than one option when using Survey.QuestionTagboxModel constructor May 2, 2024
@RomanTsukanov RomanTsukanov changed the title Cannot select more than one option when using Survey.QuestionTagboxModel constructor Multi-Select Dropdown (Tag Box): It's impossible to select more than one option if the question was created using the QuestionTagboxModel constructor May 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug user issue An issue or bug reported by users
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants