Merge pull request #1211 from Choices-js/fix-setValue

Fix input text - method setValue didn't work

.github/workflows/browsers.yml

@@ -63,7 +63,7 @@ jobs:
     - uses: actions/upload-artifact@v4
       if: failure()
       with:
-        name: screenshot-${{ matrix.os }}
+        name: screenshot-${{ matrix.os }}-${{ matrix.browser }}
         path: test-results/**/*.png
     - uses: actions/upload-artifact@v4
       if: '!cancelled()'

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 
-## [11.0.2]
+## [11.0.3]
+
+### Bug Fixes (from 11.0.0)
+* Fix input text - method setValue didn't work [#1207](https://github.com/Choices-js/Choices/issues/1207)
+
+## [11.0.2] (2024-09-05)
 
 ### Features (from 11.0.0)
 * Pass `getClassNames` as the 3rd argument to `callbackOnCreateTemplates` callback

src/scripts/choices.ts

@@ -19,7 +19,6 @@ import {
   removeClassesFromElement,
   resolveNoticeFunction,
   resolveStringFunction,
-  sanitise,
   sortByRank,
   strToEl,
 } from './lib/utils';
@@ -737,7 +736,7 @@ class Choices {
             } as InputGroup;
           }
 
-          this._addGroup(mapInputToChoice(group, true));
+          this._addGroup(mapInputToChoice<InputGroup>(group, true));
         } else {
           let choice = groupOrChoice;
           if (!isDefaultLabel || !isDefaultValue) {
@@ -747,7 +746,7 @@ class Choices {
               label: choice[label],
             } as InputChoice;
           }
-          this._addChoice(mapInputToChoice(choice, false));
+          this._addChoice(mapInputToChoice<InputChoice>(choice, false));
         }
       });
 
@@ -1324,7 +1323,7 @@ class Choices {
       if (this.passedElement.value) {
         const elementItems: ChoiceFull[] = this.passedElement.value
           .split(config.delimiter)
-          .map((e: InputChoice | string) => mapInputToChoice(e, false));
+          .map((e: string) => mapInputToChoice<string>(e, false, this.config.allowHtmlUserInput));
         this._presetChoices = this._presetChoices.concat(elementItems);
       }
       this._presetChoices.forEach((choice: ChoiceFull) => {
@@ -1740,21 +1739,7 @@ class Choices {
           return;
         }
 
-        const sanitisedValue = sanitise(value);
-        const userValue =
-          this.config.allowHtmlUserInput || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
-        this._addChoice(
-          mapInputToChoice(
-            {
-              value: userValue,
-              label: userValue,
-              selected: true,
-            } as InputChoice,
-            false,
-          ),
-          true,
-          true,
-        );
+        this._addChoice(mapInputToChoice<string>(value, false, this.config.allowHtmlUserInput), true, true);
         addedItem = true;
       }
 

src/scripts/lib/choice-input.ts

@@ -2,7 +2,7 @@ import { InputChoice } from '../interfaces/input-choice';
 import { InputGroup } from '../interfaces/input-group';
 import { GroupFull } from '../interfaces/group-full';
 import { ChoiceFull } from '../interfaces/choice-full';
-import { unwrapStringForRaw } from './utils';
+import { sanitise, unwrapStringForRaw } from './utils';
 
 type MappedInputTypeToChoiceType<T extends string | InputChoice | InputGroup> = T extends InputGroup
   ? GroupFull
@@ -27,13 +27,18 @@ export const stringToHtmlClass = (input: string | string[] | undefined): string[
 export const mapInputToChoice = <T extends string | InputChoice | InputGroup>(
   value: T,
   allowGroup: boolean,
+  allowRawString: boolean = true,
 ): MappedInputTypeToChoiceType<T> => {
   if (typeof value === 'string') {
-    const result: ChoiceFull = mapInputToChoice(
+    const sanitisedValue = sanitise(value);
+    const userValue = allowRawString || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
+
+    const result: ChoiceFull = mapInputToChoice<InputChoice>(
       {
         value,
-        label: value,
-      } as InputChoice,
+        label: userValue,
+        selected: true,
+      },
       false,
     );
 
@@ -47,7 +52,7 @@ export const mapInputToChoice = <T extends string | InputChoice | InputGroup>(
       throw new TypeError(`optGroup is not allowed`);
     }
     const group = groupOrChoice;
-    const choices = group.choices.map((e) => mapInputToChoice(e, false));
+    const choices = group.choices.map((e) => mapInputToChoice<InputChoice>(e, false));
 
     const result: GroupFull = {
       id: 0, // actual ID will be assigned during _addGroup