#7305 Autocomplete doesn't work correctly in dropdown (#7313)

* #7305 Autocomplete doesn't work correctly in dropdown Fixes #7305 * #7305 - fixed angular
surveyjs · Nov 10, 2023 · d102cea · d102cea
1 parent 8353d16
commit d102cea
Show file tree

Hide file tree

Showing 33 changed files with 129 additions and 53 deletions.
diff --git a/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html b/packages/survey-angular-ui/src/components/dropdown/dropdown.component.html
@@ -1,5 +1,5 @@
 <div [class]="model.cssClasses.selectWrapper" (click)="click($event)">
-    <div *ngIf="!model.isReadOnly" [attr.tabindex]="dropdownModel.inputReadOnly ? null : 0" [class]="model.getControlClass()"
+    <div *ngIf="!model.isReadOnly" [attr.tabindex]="dropdownModel.noTabIndex ? null : 0" [class]="model.getControlClass()"
         [attr.disabled]="model.isInputReadOnly ? true : null" (blur)="blur($event)"
         (keydown)="keyhandler($event)" [attr.id]="model.inputId" [attr.aria-required]="model.ariaRequired"
         [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid"
@@ -23,14 +23,15 @@
             [attr.role]="dropdownModel.filterStringEnabled ? model.ariaRole : null"
             [attr.id]="model.getInputId()"
             [attr.inputmode]="dropdownModel.inputMode"
-            [attr.tabindex]="dropdownModel.inputReadOnly ? null : -1"
+            [attr.tabindex]="dropdownModel.noTabIndex ? null : -1"
             [attr.disabled]="model.isInputReadOnly ? true : null"
             [attr.aria-controls]="dropdownModel.listElementId"
             [attr.aria-label]="model.a11y_input_ariaLabel"
             [attr.aria-labelledby]="model.a11y_input_ariaLabelledBy"
             [attr.aria-expanded]="model.ariaExpanded"
             [attr.aria-activedescendant]="dropdownModel.ariaActivedescendant"
-            [attr.placeholder]="dropdownModel.placeholderRendered" [attr.readonly]="!dropdownModel.searchEnabled ? true : null" 
+            [attr.placeholder]="dropdownModel.placeholderRendered" 
+            [attr.readonly]="dropdownModel.filterReadOnly ? true : null" 
             (change)="inputChange($event)" (blur)="blur($event)" (focus)="focus($event)"/>
         </div>
         <div *ngIf="(model.allowClear && model.cssClasses.cleanButtonIconId)"

diff --git a/packages/survey-angular-ui/src/components/tagbox/tagbox-filter.component.html b/packages/survey-angular-ui/src/components/tagbox/tagbox-filter.component.html
@@ -16,7 +16,7 @@
       [class]="question.cssClasses.filterStringInput"
       [attr.inputmode]="model.inputMode"
       [attr.role]="model.filterStringEnabled ? question.ariaRole : null"
-      [attr.readonly]="!model.searchEnabled ? true : null"
+      [attr.readonly]="model.filterReadOnly ? true : null"
       [attr.disabled]="question.isInputReadOnly ? true : null"
       [attr.size]="!model.inputStringRendered ? 1 : null"
       [attr.aria-label]="question.a11y_input_ariaLabel"

diff --git a/packages/survey-angular-ui/src/components/tagbox/tagbox.component.html b/packages/survey-angular-ui/src/components/tagbox/tagbox.component.html
@@ -1,5 +1,5 @@
 <div [class]="model.cssClasses.selectWrapper" (click)="click($event)">
-    <div *ngIf="!model.isReadOnly" [attr.tabindex]="dropdownModel.inputReadOnly ? null : 0" [class]="model.getControlClass()"
+    <div *ngIf="!model.isReadOnly" [attr.tabindex]="dropdownModel.noTabIndex ? null : 0" [class]="model.getControlClass()"
         [attr.disabled]="model.isInputReadOnly ? true : null" (blur)="blur($event)"
         (keydown)="keyhandler($event)" [attr.id]="model.inputId" [attr.aria-required]="model.ariaRequired"
         [attr.aria-label]="model.ariaLabel" [attr.aria-invalid]="model.ariaInvalid"

diff --git a/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue b/packages/survey-vue3-ui/src/components/dropdown/Dropdown.vue
@@ -4,7 +4,7 @@
       v-if="!question.isReadOnly"
       :id="question.inputId"
       :disabled="question.isInputReadOnly ? true : null"
-      :tabindex="model.inputReadOnly ? undefined : 0"
+      :tabindex="model.noTabIndex ? undefined : 0"
       @keydown="keyhandler"
       @blur="blur"
       :class="question.getControlClass()"
@@ -56,8 +56,8 @@
           :inputmode="model.inputMode"
           :role="model.filterStringEnabled ? question.ariaRole : undefined"
           :id="question.getInputId()"
-          :tabindex="model.inputReadOnly ? undefined : -1"
-          :readonly="!model.searchEnabled ? true : undefined"
+          :tabindex="model.noTabIndex ? undefined : -1"
+          :readonly="model.filterReadOnly ? true : undefined"
           :aria-expanded="
             question.ariaExpanded === null
               ? undefined

diff --git a/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue b/packages/survey-vue3-ui/src/components/tagbox/Tagbox.vue
@@ -3,7 +3,7 @@
     <div
       v-if="!question.isReadOnly"
       :id="question.inputId"
-      :tabindex="model.inputReadOnly ? undefined : 0"
+      :tabindex="model.noTabIndex ? undefined : 0"
       v-bind:disabled="question.isInputReadOnly ? true : null"
       @keydown="keyhandler"
       @blur="blur"

diff --git a/packages/survey-vue3-ui/src/components/tagbox/TagboxFilter.vue b/packages/survey-vue3-ui/src/components/tagbox/TagboxFilter.vue
@@ -32,7 +32,7 @@
         :aria-labelledby="question.a11y_input_ariaLabelledBy"
         :aria-activedescendant="model.ariaActivedescendant"
         :id="question.getInputId()"
-        :readonly="!model.searchEnabled ? true : undefined"
+        :readonly="model.filterReadOnly ? true : undefined"
         :size="!model.inputStringRendered ? 1 : undefined"
         @change="inputChange"
         @keydown="inputKeyHandler"

diff --git a/src/dropdownListModel.ts b/src/dropdownListModel.ts
@@ -17,7 +17,7 @@ export class DropdownListModel extends Base {
 
   private _markdownMode = false;
   private _popupModel: PopupModel;
-  focused: boolean;
+  @property({ defaultValue: false }) focused: boolean;
   private get focusFirstInputSelector(): string {
     return this.getFocusFirstInputSelector();
   }
@@ -339,9 +339,12 @@ export class DropdownListModel extends Base {
   get popupModel(): PopupModel {
     return this._popupModel;
   }
-  public get inputReadOnly(): boolean {
+  public get noTabIndex(): boolean {
     return this.question.isInputReadOnly || this.searchEnabled;
   }
+  public get filterReadOnly(): boolean {
+    return this.question.isInputReadOnly || !this.searchEnabled || !this.focused;
+  }
   public get filterStringEnabled(): boolean {
     return !this.question.isInputReadOnly && this.searchEnabled;
   }

diff --git a/src/knockout/components/dropdown/dropdown.html b/src/knockout/components/dropdown/dropdown.html
@@ -5,7 +5,7 @@
     attr: { 
       id: question.inputId, 
       required: question.isRequired, 
-      tabindex: model.inputReadOnly ? undefined : 0,
+      tabindex: model.noTabIndex ? undefined : 0,
       disabled: question.isInputReadOnly,
       role: question.ariaRole,
       'aria-required': question.ariaRequired, 
@@ -46,9 +46,9 @@
         'aria-label': question.a11y_input_ariaLabel,
         'aria-labelledby': question.a11y_input_ariaLabelledBy,
         placeholder: model.placeholderRendered, 
-        readonly: !model.searchEnabled, 
+        readonly: model.filterReadOnly || undefined, 
         role: model.filterStringEnabled ? question.ariaRole : undefined,
-        tabindex: model.inputReadOnly ? undefined : -1,
+        tabindex: model.noTabIndex ? undefined : -1,
         disabled: question.isInputReadOnly,
         id: question.getInputId(), 
         inputmode: model.inputMode

diff --git a/src/knockout/components/tagbox/tagbox.html b/src/knockout/components/tagbox/tagbox.html
@@ -5,7 +5,7 @@
     attr: { 
       id: question.inputId, 
       required: question.isRequired, 
-      tabindex: model.inputReadOnly ? undefined : 0,
+      tabindex: model.noTabIndex ? undefined : 0,
       disabled: question.isInputReadOnly,
       role: question.ariaRole,
       'aria-required': question.ariaRequired, 
@@ -48,7 +48,7 @@
             'aria-labelledby': question.a11y_input_ariaLabelledBy,
             placeholder: model.filterStringPlaceholder, 
             disabled: question.isInputReadOnly,
-            readonly: !model.searchEnabled 
+            readonly: model.filterReadOnly
           },
           event: { keydown: inputKeyHandler, blur: blur, focus: focus }"></input>
         </div>

diff --git a/src/react/dropdown-base.tsx b/src/react/dropdown-base.tsx
@@ -86,7 +86,7 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
     return (<div
       id={this.question.inputId}
       className={this.question.getControlClass()}
-      tabIndex={dropdownListModel.inputReadOnly ? undefined : 0}
+      tabIndex={dropdownListModel.noTabIndex ? undefined : 0}
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       disabled={this.question.isInputReadOnly}
@@ -124,8 +124,8 @@ export class SurveyQuestionDropdownBase<T extends Question> extends SurveyQuesti
           aria-controls={dropdownListModel.listElementId}
           aria-activedescendant={dropdownListModel.ariaActivedescendant}
           placeholder={dropdownListModel.placeholderRendered}
-          readOnly={!dropdownListModel.searchEnabled ? true : undefined}
-          tabIndex={dropdownListModel.inputReadOnly ? undefined : -1}
+          readOnly={dropdownListModel.filterReadOnly ? true : undefined}
+          tabIndex={dropdownListModel.noTabIndex ? undefined : -1}
           disabled={this.question.isInputReadOnly}
           inputMode={dropdownListModel.inputMode}
           onChange={(e) => { onInputChange(e); }}

diff --git a/src/react/reactquestion_tagbox.tsx b/src/react/reactquestion_tagbox.tsx
@@ -28,7 +28,7 @@ export class SurveyQuestionTagbox extends SurveyQuestionDropdownBase<QuestionTag
       <div
         id={this.question.inputId}
         className={this.question.getControlClass()}
-        tabIndex={dropdownListModel.inputReadOnly ? undefined : 0}
+        tabIndex={dropdownListModel.noTabIndex ? undefined : 0}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         disabled={this.question.isInputReadOnly}

diff --git a/src/react/tagbox-filter.tsx b/src/react/tagbox-filter.tsx
@@ -75,7 +75,7 @@ export class TagboxFilterString extends SurveyElementBase<ITagboxFilterProps, an
             ref={(element) => (this.inputElement = element)}
             className={this.question.cssClasses.filterStringInput}
             disabled={this.question.isInputReadOnly}
-            readOnly={!this.model.searchEnabled ? true : undefined}
+            readOnly={this.model.filterReadOnly ? true : undefined}
             size={!this.model.inputStringRendered ? 1 : undefined}
             role={this.model.filterStringEnabled ? this.question.ariaRole : undefined}
             aria-expanded={this.question.ariaExpanded === null ? undefined : this.question.ariaExpanded === "true"}

diff --git a/src/vue/components/dropdown/dropdown.vue b/src/vue/components/dropdown/dropdown.vue
@@ -4,7 +4,7 @@
       v-if="!question.isReadOnly"
       :id="question.inputId"
       v-bind:disabled="question.isInputReadOnly"
-      :tabindex="model.inputReadOnly ? undefined : 0"
+      :tabindex="model.noTabIndex ? undefined : 0"
       @keydown="keyhandler"
       @blur="blur"
       :class="question.getControlClass()"
@@ -47,8 +47,8 @@
       :inputmode="model.inputMode"
       :role="model.filterStringEnabled ? question.ariaRole : null"
       :id="question.getInputId()"
-      :tabindex="model.inputReadOnly ? undefined : -1"
-      :readonly="!model.searchEnabled ? true : null"
+      :tabindex="model.noTabIndex ? undefined : -1"
+      :readonly="model.filterReadOnly ? true : null"
       :aria-expanded="question.ariaExpanded"
       :aria-label="question.a11y_input_ariaLabel"
       :aria-labelledby="question.a11y_input_ariaLabelledBy"

diff --git a/src/vue/components/tagbox/tagbox-filter.vue b/src/vue/components/tagbox/tagbox-filter.vue
@@ -30,7 +30,7 @@
                 :aria-controls="model.listElementId"
                 :aria-activedescendant="model.ariaActivedescendant"
                 :id="question.getInputId()"
-                :readonly="!model.searchEnabled ? true : null"
+                :readonly="model.filterReadOnly ? true : null"
                 :size="!model.inputStringRendered ? 1 : null"
                 @change="inputChange"
                 @keydown="inputKeyHandler"

diff --git a/src/vue/components/tagbox/tagbox.vue b/src/vue/components/tagbox/tagbox.vue
@@ -3,7 +3,7 @@
     <div
       v-if="!question.isReadOnly"
       :id="question.inputId"
-      :tabindex="model.inputReadOnly ? undefined : 0"
+      :tabindex="model.noTabIndex ? undefined : 0"
       v-model="question.renderedValue"
       v-bind:disabled="question.isInputReadOnly"
       @keydown="keyhandler"

diff --git a/tests/dropdown_list_model_test.ts b/tests/dropdown_list_model_test.ts
@@ -881,3 +881,13 @@ QUnit.test("order & locale change", function (assert) {
   assert.equal(list.actions[0].id, "B", "action[0].id, de");
   assert.equal(list.actions[1].id, "A", "action[1].id, de");
 });
+QUnit.test("DropdownListModel filterReadOnly", (assert) => {
+  const survey = new SurveyModel(jsonDropdown);
+  const question = <QuestionDropdownModel>survey.getAllQuestions()[0];
+  const dropdownListModel = question.dropdownListModel;
+  assert.ok(dropdownListModel.filterReadOnly);
+  dropdownListModel.onFocus(null);
+  assert.notOk(dropdownListModel.filterReadOnly);
+  dropdownListModel.onBlur({ stopPropagation: () => { } });
+  assert.ok(dropdownListModel.filterReadOnly);
+});
diff --git a/tests/markup/etalon_dropdown.ts b/tests/markup/etalon_dropdown.ts
@@ -312,6 +312,33 @@ registerMarkupTests(
       removeIds: true,
       snapshot: "dropdown-input-string",
     },
+    {
+      name: "Test Dropdown question input focused",
+      json: {
+        questions: [
+          {
+            "type": "dropdown",
+            "name": "name",
+            "title": "Question title",
+            "searchEnabled": true,
+            "choices": [
+              "Ford",
+              "Vauxhall",
+              "Volkswagen",
+            ],
+            titleLocation: "hidden",
+          }
+        ]
+      },
+      initSurvey: (survey) => {
+        survey.focusFirstQuestionAutomatic = false;
+        survey.getQuestionByName("name")["popupModel"];
+        survey.getQuestionByName("name")["dropdownListModel"].focused = true;
+      },
+      timeout: 300,
+      removeIds: true,
+      snapshot: "dropdown-input-focused",
+    },
     {
       name: "Test dropdown aria-expanded",
       json: {

diff --git a/tests/markup/snapshots/dropdown-aria-expanded.snap.html b/tests/markup/snapshots/dropdown-aria-expanded.snap.html
@@ -2,7 +2,7 @@
 	<div class="sv_select_wrapper">
 		<div aria-controls="testid0i_list" aria-expanded="true" aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_q_dropdown_control" id="testid0i" role="combobox">
 			<div class="sv_q_dropdown__value">
-				<input aria-controls="testid0i_list" aria-expanded="true" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="Select..." role="combobox" type="text">
+				<input aria-controls="testid0i_list" aria-expanded="true" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
 			</div>
 			<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
 				<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">

diff --git a/tests/markup/snapshots/dropdown-input-focused.snap.html b/tests/markup/snapshots/dropdown-input-focused.snap.html
@@ -0,0 +1,35 @@
+<div>
+	<div class="sv_select_wrapper">
+		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_q_dropdown_control" role="combobox">
+			<div class="sv_q_dropdown__value">
+				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" inputmode="text" placeholder="Select..." role="combobox" type="text">
+			</div>
+			<div class="sv_q_dropdown_clean-button" style="display:none;">
+				<svg aria-label="Clear" class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">
+					<use xlink:href="#icon-clear_16x16" class="">
+					</use>
+					<title class="">Clear</title>
+				</svg>
+			</div>
+		</div>
+		<div>
+			<div class="sv-dropdown-popup sv-popup sv-popup--dropdown sv-single-select-list" style="display:none;" tabindex="-1">
+				<div class="sv-popup__container">
+					<div class="sv-popup__shadow">
+						<div class="sv-popup__body-content">
+							<div class="sv-popup__scrolling-content">
+								<div class="sv-popup__content">
+									<div class="sv-list__container">
+										<div class="sv-list__empty-container" style="display:none;">
+											<div aria-label="No data to display" class="sv-list__empty-text">No data to display</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/tests/markup/snapshots/dropdown-input-string.snap.html b/tests/markup/snapshots/dropdown-input-string.snap.html
@@ -9,7 +9,7 @@
 					<span style="visibility:hidden;">o</span>
 					<span>rd</span>
 				</div>
-				<input aria-controls="testid0i_list" aria-expanded="true" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" inputmode="text" placeholder="" role="combobox" type="text">
+				<input aria-controls="testid0i_list" aria-expanded="true" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
 			</div>
 			<div class="sv_q_dropdown_clean-button" style="display:none;" tabindex="0">
 				<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">

diff --git a/tests/markup/snapshots/dropdown-select-clear-button.snap.html b/tests/markup/snapshots/dropdown-select-clear-button.snap.html
@@ -3,7 +3,7 @@
 		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_q_dropdown_control" id="testid0i" role="combobox">
 			<div class="sv_q_dropdown__value">
 				<span class="sv-string-viewer">item1</span>
-				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" role="combobox" type="text">
+				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
 			</div>
 			<div class="sv_q_dropdown_clean-button" tabindex="0">
 				<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">

diff --git a/tests/markup/snapshots/dropdown-select-mobile.snap.html b/tests/markup/snapshots/dropdown-select-mobile.snap.html
@@ -2,7 +2,7 @@
 	<div class="sv_select_wrapper">
 		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_q_dropdown_control" id="testid0i" role="combobox">
 			<div class="sv_q_dropdown__value">
-				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="none" placeholder="Select..." role="combobox" type="text">
+				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="none" placeholder="Select..." readonly="" role="combobox" type="text">
 			</div>
 		</div>
 		<div>

diff --git a/tests/markup/snapshots/dropdown-select.snap.html b/tests/markup/snapshots/dropdown-select.snap.html
@@ -2,7 +2,7 @@
 	<div class="sv_select_wrapper">
 		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_q_dropdown_control" id="testid0i" role="combobox">
 			<div class="sv_q_dropdown__value">
-				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="Select..." role="combobox" type="text">
+				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="Select..." readonly="" role="combobox" type="text">
 			</div>
 		</div>
 		<div>

diff --git a/tests/markup/snapshots/dropdown-with-markdown.snap.html b/tests/markup/snapshots/dropdown-with-markdown.snap.html
@@ -3,7 +3,7 @@
 		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_q_dropdown_control" id="testid0i" role="combobox">
 			<div class="sv_q_dropdown__value">
 				<span class="sv-string-viewer">Cat: ![A cat](https://surveyjs.io/Content/Images/examples/markdown/cat.svg =14x14)</span>
-				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" role="combobox" type="text">
+				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
 			</div>
 			<div class="sv_q_dropdown_clean-button" tabindex="0">
 				<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">

diff --git a/tests/markup/snapshots/dropdown-with-none-value.snap.html b/tests/markup/snapshots/dropdown-with-none-value.snap.html
@@ -3,7 +3,7 @@
 		<div aria-controls="testid0i_list" aria-expanded="false" aria-invalid="false" aria-label="Question title" aria-required="false" class="sv_q_dropdown_control" id="testid0i" role="combobox">
 			<div class="sv_q_dropdown__value">
 				<span class="sv-string-viewer">None</span>
-				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" role="combobox" type="text">
+				<input aria-controls="testid0i_list" aria-expanded="false" aria-label="Question title" autocomplete="off" class="sv_q_dropdown__filter-string-input" id="testid0i_0" inputmode="text" placeholder="" readonly="" role="combobox" type="text">
 			</div>
 			<div class="sv_q_dropdown_clean-button" tabindex="0">
 				<svg class="sv_q_dropdown_clean-button-svg sv-svg-icon" role="img">