Initial selected options in select-pure[multiple] not set

[davidhund]

I have a Vanilla select-pure[multiple] with one option[selected] in a form.
The selected option is correctly shown as selected in the widget and it is present in _selectedOptions.

However: the hidden input does not reflect this! It's value remains empty until I make another selection...

So submitting the form directly — without interacting with the select-pure element — does not correctly post my intially selection option(s). Only after (de)selecting another option is my initial selected option added to the hidden input...

I believe the issue is that the method updateHiddenInputInForm() is only called by setSelectValue() which is only called on update, not initially. Unless I'm missing something?

[dudyn5ky1]

Thanks for the report!

The problem was with multiple hidden inputs inside the form. It should be fixed in 2.1.1-alpha.0.

[davidhund]

@dudyn5ky1 Thanks for your quick reply and fix.

Using v2.1.1-alpha.0, however, the issue remains. I believe it is not (only) a problem that there were multiple inputs created, also the initial value (onload) of selected inputs is not added…

Should setSelectValue() not also be executed onload, instead of only after an update?

[davidhund]

@dudyn5ky1 I currently work around this with a JS fix, but do you agree the issue is not resolved with the Alpha release?

[dudyn5ky1]

@davidhund sure thing, sorry for the delay. I'd be happy to review your PR

[davidhund]

@dudyn5ky1 Apologies if I was not clear: I've not made a change/workaround in your code, but created a very crude hotfix in my (extra) page's JS that simply sets the hidden inputs value to the selectedOptions at DOMContentLoaded.

/**
 * FIXME: WORKAROUND
 * for https://github.com/dudyn5ky1/select-pure/issues/41
 *
 * At DOMReady: loop over `option-pure[selected]` items
 * and add them to `value` of hidden input by that name
 */
document.addEventListener('DOMContentLoaded', (_event) => {
	$$('select-pure').forEach(s => {
		const _n = s.getAttribute('name');
		const _o = s.selectedOptions;
		if (_n && _o) {
			const _i = $(`input[type="hidden"][name="${_n}"]`);
			if (_i && !_i.value) {
				_i.value = Array.from(_o).map(o=>o.value).join(',');
			}
		}
	});
});

Again: this is not ideal, very crude, but seems to fix the issue.

(I could take a look and properly try to address this with a PR)

[dudyn5ky1]

@davidhund yeah, definitely, you are correct.

Will take a look at how to fix this soon.

[tmharryfrancis]

I've just encountered the opposite, whereby the change event is being triggered on load.

To me, this is counter intuitive. The change event should only happen then the select box value has... changed. Should there not be a different event ('initialised'?) for once the select box has been initialised?