Select2 "other" option with storeOthersAsComment set to false issue (React)

[theAtaya]

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

Bug

What is the current behavior?

In React version (maybe in others too but I use/noticed this in React) when the select2 widget is active, and the storeOthersAsComment is set to false and the dropdown question has the other option (hasOther: true), select the "Other" option and try to write something in the textarea. As soon as you type one key, it will add that as a new option in the dropdown (and it will be selected) and the textarea gets hidden.

What is the expected behavior?

When you select the "other" option you can type in the textarea as much as you want without hiding the field and adding it to the dropdown as a new option (so just like it behaves without storeOthersAsComment set to false).

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

Activate select2, add a dropdown question, then set the hasOther to true and also set the storeOthersAsComment to false.

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

From this page: https://surveyjs.io/Examples/Library?id=custom-widget-select2&platform=Reactjs&theme=bootstrap (Edit in...)
I created a new codesandbox fork and edited to reproduce the bug. It's nothing to do with choicesByUrl since it's reproducible with normal choices too.

Tested page URL: https://codesandbox.io/s/xenodochial-fire-1lkbl

Test code

import React, { Component } from "react";
import $ from "jquery";
import select2Init from "select2";
import "select2/dist/css/select2.min.css";

import * as Survey from "survey-react";
import * as widgets from "surveyjs-widgets";

import "bootstrap/dist/css/bootstrap.css";
import "survey-react/survey.css";
import "./index.css";

Survey.StylesManager.applyTheme("bootstrap");

class SurveyComponent extends Component {
  constructor() {
    super();
    window["$"] = window["jQuery"] = $;
    select2Init();
  }
  render() {
    widgets.select2(Survey);
    widgets.select2tagbox(Survey);

    const json = {
      elements: [
        {
          type: "dropdown",
          renderAs: "select2",
          hasOther: true,
          choicesByUrl: {
            url: "https://restcountries.eu/rest/v2/all"
          },
          name: "countries",
          title: "Please select the country you have arrived from:"
        }
      ]
    };
    const survey = new Survey.Model(json);

    survey.storeOthersAsComment = false;

    return <Survey.Survey model={survey} />;
  }
}

export default SurveyComponent;

Specify your

• browser: Chrome, Firefox
• browser version: Chrome: 92.0.4515.107, FF: 91.0b6
• surveyjs platform (angular or react or jquery or knockout or vue): React
• surveyjs version: 1.8.57 (latest atm)

[andrewtelnov]

@theAtaya I did not test it with react, but I am pretty sure that I have fixed the issue by the commit above.
The similar issue was in knockout. I add a condition that will not allow to add a new option if "other" option is choosen.

Thank you,
Andrew

[theAtaya]

Hey, @andrewtelnov I just tried it out and it's fixed now! Thanks!