Modern browsers remember selected form field values when refreshing page or returning to page, but Choices doesn't.

[RichardDavies]

Describe the bug Modern browsers will often preserve the current state of a form when refreshing the page or using the browser back button to return to a page with a form. This ensures that the current state of the form isn't accidentally lost. The exact behavior varies from browser to browser. For example, with Firefox, if you enter text into an <input type="text"> or select a value in a <select> field the browser remembers that when refreshing the page or going back to the page. Chrome only remembers the form state when using the back button.

However, Choices doesn't mirror this browser behavior at all, resulting in a different and potentially confusing or frustrating user experience. Ideally, Choices would mirror the browser behavior and remember the current state whenever the browser does so, but it doesn't remember the current state in any of the above-mentioned situations.

Steps to reproduce the behavior:

1. Go to https://choices-js.github.io/Choices/ using Firefox.
2. Scroll down to the first example under "Single select input" and select "Choice 3".
3. Press F12 to open the browser's developer console.
4. Run $('#choices-single-default').value in the console's command line to confirm that "Choice 3" has been selected in the native <select> element.
5. Refresh the page and run $('#choices-single-default').value again in the console to verify that the browser remembered that the native <select> element still has "Choice 3" selected.
6. Note that "Choice 3" is not shown as the selected item in the Choices element. The Choices element did not initialize with the same state as the native <select> element.

Expected behavior When a Choices element is created/initialized from a <select> element, it should be initialized with the same item selected as the native element.

Choices version and bundle

• Version: v11.1.0 choices.js (what's used by https://choices-js.github.io/Choices/ when this bug was filed)

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Firefox 138.0.1
• Browser: Chrome 136.0.7

Workaround You can use the setChoiceByValue() method when creating a Choices element to manually set its selected item to match the native element's selected item:

const choices = new Choices(element).setChoiceByValue(element.value);

[Xon]

This maybe addressed as part of #1332 as the backing element is available to be filled.