[Bug]: allowEmptyOption: true + change_listener plugin causes empty label to blank

[jasonbouffard]

Bug description

With a fairly straightforward configuration and an empty first <option>, when the user clicks back into the empty option. Tom Select clears the drop-down.

const config = {plugins: ['change_listener'], allowEmptyOption: true};
const ts = new TomSelect('#test', config);

<select name="test" id="test" data-placeholder="Choose...">
  <option value="">Empty</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

Expected behavior

I would expect the empty <option>'s label to be seen.

Steps to reproduce

https://jsfiddle.net/jpb0104/Lzmvyobj/6/

Select an option other than the empty one. Then click back into the empty one.

Additional context

No additional context needed

[jasonbouffard]

Screen.Recording.2024-09-23.at.11.36.32.AM.mov

[jasonbouffard]

I have a rough fix. Not sure if passing the original allowEmptyOption into get_settings is appropriate. Tests pass.

diff --git a/src/tom-select.ts b/src/tom-select.ts
index 697949d3..0031e3df 100644
--- a/src/tom-select.ts
+++ b/src/tom-select.ts
@@ -541,7 +541,7 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 	 */
 	sync(get_settings:boolean=true):void{
 		const self		= this;
-		const settings	= get_settings ? getSettings( self.input, {delimiter:self.settings.delimiter} as RecursivePartial<TomSettings> ) : self.settings;
+		const settings	= get_settings ? getSettings( self.input, {delimiter:self.settings.delimiter,allowEmptyOption:self.settings.allowEmptyOption} as RecursivePartial<TomSettings> ) : self.settings;
 
 		self.setupOptions(settings.options,settings.optgroups);
 

index 265e54be..c93abc0f 100644
--- a/test/support/base.js
+++ b/test/support/base.js
@@ -37,6 +37,7 @@ var teardownLast = function(){
 var test_html = {
 	AB_Multi			: '<select multiple><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>',
 	AB_Single			: '<select><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>',
+	AB_Single_Empty		: '<select><option value="">empty</option><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>',
 	AB_Single_Long		: '<select><option>a</option><option>b</option><option>c</option><option>d</option><option>e</option><option>f</option><option>g</option><option>h</option><option>i</option><option>j</option><option>k</option><option>l</option><option>m</option><option>n</option><option>o</option><option>p</option></select>',
 }
 
diff --git a/test/tests/api.js b/test/tests/api.js
index e6a4bef1..65a0af8d 100644
--- a/test/tests/api.js
+++ b/test/tests/api.js
@@ -1007,5 +1007,14 @@
 				assert.equal(test.instance.items.length, 1,'should have one item');
 				assert.equal(test.instance.items[0], 'new');
 			});
+
+			it_n('sync() should retain empty value',function(){
+				const test		= setup_test('AB_Single_Empty',{allowEmptyOption:true});
+				var opt_count	= Object.keys(test.instance.options).length;
+				test.instance.sync(true);
+
+				assert.equal(test.instance.items[0], '', 'empty item should remain');
+				assert.equal( Object.keys(test.instance.options).length, opt_count, 'option count remains');
+			});
 		});
 	});