Tagbox allowCustomChoices not working on mobile/touch enabled devices in some cases

packages/survey-core/src/dropdownListModel.ts

@@ -333,7 +333,7 @@ export class DropdownListModel extends Base {
     const res = new ListModel<ItemValue>(listOptions as any);
     this.setOnTextSearchCallbackForListModel(res);
     res.renderElements = false;
-    res.forceShowFilter = this.question.choicesLazyLoadEnabled;
+    res.forceShowFilter = this.question.choicesLazyLoadEnabled || this.question.allowCustomChoices;
     res.areSameItemsCallback = (item1: IAction, item2: IAction): boolean => {
       return item1 === item2;
     };
@@ -681,6 +681,7 @@ export class DropdownListModel extends Base {
 
   public setAllowCustomChoices(newValue: boolean): void {
     this.allowCustomChoices = newValue;
+    this.listModel.forceShowFilter = this.question.choicesLazyLoadEnabled || newValue;
     if (newValue) {
       this.searchEnabled = newValue;
     }
@@ -690,6 +691,7 @@ export class DropdownListModel extends Base {
     this.choicesLazyLoadEnabled = newValue;
     this.listModel.disableSearch = newValue;
     this.listModel.isAllDataLoaded = !newValue;
+    this.listModel.forceShowFilter = newValue || this.question.allowCustomChoices;
   }
 
   public setInputPlaceholder(newValue: string): void {

packages/survey-core/src/dropdownMultiSelectListModel.ts

@@ -76,7 +76,7 @@ export class DropdownMultiSelectListModel extends DropdownListModel {
     };
     const res = new MultiSelectListModel<ItemValue>(listOptions);
     this.setOnTextSearchCallbackForListModel(res);
-    res.forceShowFilter = this.question.choicesLazyLoadEnabled;
+    res.forceShowFilter = this.question.choicesLazyLoadEnabled || this.question.allowCustomChoices;
     return res;
   }
 

packages/survey-core/tests/dropdown_list_model_test.ts

@@ -1168,4 +1168,27 @@ QUnit.test("DropdownListModel buttons", (assert) => {
   assert.equal(chevronButton.locTitle.text, "Select", "chevronButton title #5");
   assert.equal(chevronButton.enabled, true, "chevronButton enabled #5");
   assert.equal(chevronButton.visible, true, "chevronButton visible #5");
+});
+
+QUnit.test("DropdownListModel with ListModel & allowCustomChoices true", (assert) => {
+  _setIsTouch(true);
+  try {
+    const survey = new SurveyModel({
+      elements: [{
+        "type": "dropdown",
+        "name": "current-car",
+        "choices": ["Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota"],
+        "allowCustomChoices": true
+      }]
+    });
+    const question = <QuestionDropdownModel>survey.getAllQuestions()[0];
+    const dropdownListModel = question.dropdownListModel;
+    assert.ok(dropdownListModel.popupModel.contentComponentData.model instanceof ListModel);
+
+    const list: ListModel = dropdownListModel.popupModel.contentComponentData.model as ListModel;
+    assert.equal(list.actions.length, 9);
+    assert.equal(list.showFilter, true, "list.showFilter true");
+  } finally {
+    _setIsTouch(false);
+  }
 });

packages/survey-core/tests/dropdown_multi_select_list_model_test.ts

@@ -2,6 +2,7 @@ import { DropdownMultiSelectListModel } from "../src/dropdownMultiSelectListMode
 import { MultiSelectListModel } from "../src/multiSelectListModel";
 import { QuestionTagboxModel } from "../src/question_tagbox";
 import { SurveyModel } from "../src/survey";
+import { _setIsTouch } from "../src/utils/devices";
 
 export default QUnit.module("DropdownMultiListModel");
 
@@ -395,4 +396,27 @@ QUnit.test("Hide popup if hideSelectedItems and click 'Select All'", (assert) =>
   assert.deepEqual(question.value.length, 10);
   assert.equal(dropdownListModel.popupModel.isVisible, false);
   assert.equal(list.actions[0].title, "Deselect all");
+});
+
+QUnit.test("DropdownListModel with MultiListModel & allowCustomChoices true", (assert) => {
+  _setIsTouch(true);
+  try {
+    const survey = new SurveyModel({
+      elements: [{
+        "type": "tagbox",
+        "name": "current-car",
+        "choices": ["Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota"],
+        "allowCustomChoices": true
+      }]
+    });
+    const question = <QuestionTagboxModel>survey.getAllQuestions()[0];
+    const dropdownListModel = question.dropdownListModel;
+    assert.ok(dropdownListModel.popupModel.contentComponentData.model instanceof MultiSelectListModel);
+
+    const list: MultiSelectListModel = dropdownListModel.popupModel.contentComponentData.model as MultiSelectListModel;
+    assert.equal(list.actions.length, 9);
+    assert.equal(list.showFilter, true, "list.showFilter true");
+  } finally {
+    _setIsTouch(false);
+  }
 });