Skip to content
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.

Sign up for GitHub

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

Jump to bottom

selectize.destroy and 'blur' event on other selectized objectects #2083

Open
CyrilleHantz opened this issue Feb 14, 2024 · 0 comments
Open

selectize.destroy and 'blur' event on other selectized objectects #2083

CyrilleHantz opened this issue Feb 14, 2024 · 0 comments

Comments

@CyrilleHantz
Copy link

Selectize 0.15.2

I did:
Issue seems to be same as the "wrongly completed" issue 2017 Here
Description: Selectize Bug on "Selectize.count"

Steps to reproduce:

<!DOCTYPE html>
<html lang="fr">
	<head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Debug</title>
		
		<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" />
    </head>
	<body ondragover="event.preventDefault();" ondrop="event.preventDefault();">
		<p><select id="sel1" multiple>
			<option>opt 1</option>
			<option>opt 2</option>
			<option>opt 3</option>
		</select></p>
		
		<p><select id="sel2" multiple>
			<option>opt 1</option>
			<option>opt 2</option>
			<option>opt 3</option>
		</select></p>
		
		<div><button id="bu">Initialize 1</button></div>
		
		<script>
		$(document).ready( () => {
			let sel1 = $('#sel1');
			let sel2 = $('#sel2');
			
			sel1.selectize();
			sel2.selectize();
			
			$('#bu').on('click', () => {
				sel1[0].selectize.destroy();
				sel1.val([]);
				sel1.selectize();
			});
		});
		</script>
	</body>
</html>
  1. look on the second select => OK
  2. Press "Initialize 1"
  3. look on the second select => OK
  4. Press "Initialize 1"
  5. look on the second select => Cannot 'blur' it

Expected result: no bug

Actual result: selectized object is blocked

Code bug:
selectize.js, line 1179:
eventNS: '.selectize' + (++Selectize.count)
selectize.js, line 3509:
--Selectize.count

Solution:
eventNS should be linked to an "uid" not a counter.

Workaround:
Increment Selectize counter after destroy.
I do not know how to do it in my stand-alone example, but generally with require:

require([
        'jquery',
        'selectize'
    ], function ($, selectize) {
        ...
        input_jquery[0].selectize.destroy();
        selectize.count++;
        ...
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@CyrilleHantz