Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jasonbouffard opened this issue Sep 23, 2024 · 3 comments · May be fixed by #833
Closed

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

jasonbouffard opened this issue Sep 23, 2024 · 3 comments · May be fixed by #833
Labels
bug Something isn't working stale No activity

Comments

@jasonbouffard
Copy link

jasonbouffard commented Sep 23, 2024

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 jasonbouffard added the bug Something isn't working label Sep 23, 2024
@jasonbouffard
Copy link
Author

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

@jasonbouffard
Copy link
Author

jasonbouffard commented Dec 6, 2024

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');
+			});
 		});
 	});

@jasonbouffard jasonbouffard changed the title [Bug]: controlInput: null + change_listener plugin causes empty label to blank [Bug]: allowEmptyOption: true + change_listener plugin causes empty label to blank Dec 6, 2024
Copy link

github-actions bot commented Apr 6, 2025

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days

@github-actions github-actions bot added the stale No activity label Apr 6, 2025
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working stale No activity
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant