[Bug]: selected options lose their optgroup when option hideSelected:false

[picov]

Bug description

A little sample to describe the problem.

We have a basic multiple select with optgroups and some preselected options.
We need to keep the selected options in the dropdown menu (hideSelected:false) and we need to render them according to the class of their optgroup.

HTML

<select id="select-gear" multiple placeholder="Select gear...">
	<option value="">Select something...</option>
	<optgroup label="Group#1" class="optgrp1cssclass">
		<option value="pitons">Pitons</option>
		<option value="cams">Cams</option>
		<option value="nuts" selected>Nuts</option>
	</optgroup>
	<optgroup label="Group#2" class="optgrp2cssclass">
		<option value="dog">Dog</option>
		<option value="cat" selected>Cat</option>
	</optgroup>
</select>

TS INITIALIZATION (v 2.4.3)

new TomSelect('#select-gear', {
	hideSelected: false, // Keep selected options in dropdown menu
	render: {
		option: function (data, escape) {
			const parentEl = data.$option.parentElement;
			if (parentEl.nodeName === "OPTGROUP") {
				console.log("Optgroup classname for option '" + data.text + "' is: " + parentEl.className);
			} else {
				console.log("No optgroup for option  '" + data.text + "' -> could not read optgroup className!");
			}
			return '<div>- ' + escape(data.text) + '</div>';
		}
	}
});

CONSOLE LOG:

[Log] Optgroup classname for option 'Pitons' is: optgrp1cssclass 
[Log] Optgroup classname for option 'Cams' is: optgrp1cssclass
[Log] No optgroup for option  'Nuts' -> could not read optgroup className!
[Log] Optgroup classname for option 'Dog' is: optgrp2cssclass
[Log] No optgroup for option  'Cat' -> could not read optgroup className! 

The parent element of all selected items INCORRECTLY become the SELECT with a DOM structure like this:

<select id="select-gear" multiple="multiple" placeholder="Select something...">
	<option value="">Select something...</option>
	<optgroup label="Group#1" class="optgrp1cssclass">
		<option value="pitons">Pitons</option>
		<option value="cams">Cams</option>
		
	</optgroup>
	<optgroup label="Group#2" class="optgrp2cssclass">
		<option value="dog">Dog</option>
		
	</optgroup>
	<option value="nuts" selected="">Nuts</option>
	<option value="cat" selected="">Cat</option>
</select>

Expected behavior

Selected items should keep the information about their original optgroup because with the option hideSelected: false they're still rendered in that position and should be possible to custom render theme like the others.

Steps to reproduce

Run the sample code provided or edit the examples provided inside the "Option Groups" page of the TS website in CodePen or JSFiddle.

Additional context

None

[xJuvi]

Hey,
i can understand your problem...
And found it in the code:

tom-select/src/tom-select.ts

Line 2226 in 4522c18

self.input.append(option_el);

All options will only be apend. There is no check if the option is inside an optgroup. So the complete logic from the method updateOriginalInput must be refactored. It's not quite easy.

Maybe someone has a bit time for that - i'll try it in the next weeks after fixing other bugs here....

Kind regards

[picov]

Hi xJuvi,
thank you for your interest.
I've discovered this problem using a select that can get data inline from HTML or via Ajax.
The strange thing is that it seems that this problem appears only if TS get data from existing HTML.

I therefore discovered that If I set the SAME options from code, the optgroup info is correct.

The example below use the same HTML of the first post.
The TS object is created and I click on it before the timeout of 5 seconds.
Then after 5 sec the timeout fire and the select elementi is being updated via JS with the SAME HTML of options.
As you can see the console log become correct.

const myTs = new TomSelect('#select-gear', {
	hideSelected: false, // Keep selected options in dropdown menu
	render: {
		option: function (data, escape) {
      //console.log(data.$option);
			const parentEl = data.$option.parentNode;
			if (parentEl.nodeName === "OPTGROUP") {
				console.log("Optgroup classname for option '" + data.text + "' is: " + parentEl.className);
			} else {
				console.log("No optgroup for option  '" + data.text + "' -> could not read optgroup className!");
			}
			return '<div>- ' + escape(data.text) + '</div>';
		}
	}
});

setTimeout(function() {
  console.log("Timeout fired: updating select innerHtml with same options")
  myTs.clear();
  myTs.clearOptions();
  myTs.input.innerHTML = ' \
	<option value="">Select something...</option> \
	<optgroup label="Group#1" class="optgrp1cssclass"> \
		<option value="pitons">Pitons</option> \
		<option value="cams">Cams</option> \
		<option value="nuts" selected>Nuts</option> \
	</optgroup> \
	<optgroup label="Group#2" class="optgrp2cssclass"> \
		<option value="dog">Dog</option> \
		<option value="cat" selected>Cat</option> \
	</optgroup> \
  ';
  myTs.sync();
  
},5000);

CONSOLE

(click before 5 seconds)
[Log] Optgroup classname for option 'Pitons' is: optgrp1cssclass 
[Log] Optgroup classname for option 'Cams' is: optgrp1cssclass
[Log] No optgroup for option  'Nuts' -> could not read optgroup className! 
[Log] Optgroup classname for option 'Dog' is: optgrp2cssclass 
[Log] No optgroup for option  'Cat' -> could not read optgroup className! 
[Log] Timeout fired: updating select innerHtml with same options 
[Log] Optgroup classname for option 'Pitons' is: optgrp1cssclass 
[Log] Optgroup classname for option 'Cams' is: optgrp1cssclass 
[Log] Optgroup classname for option 'Nuts' is: optgrp1cssclass 
[Log] Optgroup classname for option 'Dog' is: optgrp2cssclass 
[Log] Optgroup classname for option 'Cat' is: optgrp2cssclass 

If I inspect the DOM the selected options are still added after all items, but in this way the optgroup info is correctly in place also for selected items.

[xJuvi]

Yeah for sure. But with your innerHTML snipped you are manipulating the input. It doesn't matter because the piece of code from my previous posting is related to this issue. There is the logic of optgroups missing - and not required for UI reasons.

Please check the line from my posting, there you mus build a fix. This issue occours with HTML oder ajax or something else. It's the result of the updateOriginalInput method.

Kind regards

[picov]

It's "seems" strange because with te second example I not set the options or optgroups via JS using method like addOptions etc..
I'm using innerHTML to set the SAME HTML that TS found inside the DOM at init.
In this way the optgroups are parsed correctly even if they're still placed at the end of the list outside their otpgroup.

[accolade-illa]

I have a bit of a similar issue and yet not. Basically, I simply have optgroups. No magic, but it moves selected values outside the optgroup already on load. They are in no way added - they are pre-existing values that simply are selected. This should NOT happen and the original select structure should be kept as is. Atm I need to look for a workaround as I rely on that original setup and original order.