[Zugewiesen] using Tom Select on Toolset dropdown select lists

[Author]

Artikel

[davidm-13]

Tell us what you are trying to do?

I'm having problems implementing Tom Select plugin with Toolset, can you help me set it up - my problem is that on mobile device the <select > options list takes over the whole screen and is not user freindly
What is the link to your site?
versteckter Link

[davidm-13]

chatGPT tells me "The reason the console errors persist is that Toolset is generating its own JS for Tom Select, and it runs before your library is loaded.

The proper fix is to disable Toolset’s auto-initialization in the View settings."

How do I disable Toolset’s auto-initialization in the View settings?

[Minesh]

Hello. Thank you for contacting the Toolset support.

First of all, let me clear that we do not have any official integration of Tom select plugin with Toolset.

Here is the official Doc that may help you about how to create responsive design:
- https://toolset.com/course-lesson/creating-responsive-designs/
- https://toolset.com/course-lesson/responsive-columns-and-grids/

You can try to put your Tom select control within column or grip and set the desired responsive criteria and check if that helps.

[davidm-13]

Hi Minesh, Thanks for your reply.
I have this in my page source:
<script>
function initTomSelects() {
document.querySelectorAll('.tom-select-init').forEach(function (select) {
if (!select.tomselect) {
new TomSelect(select, {
dropdownDirection: "top", // or "bottom" or "auto"
maxOptions: null, // remove limit completely
openOnFocus: true,
sortField: {
field: "text",
direction: "asc"
}
});
}
});
}

// Run on DOM load
document.addEventListener('DOMContentLoaded', function () {
initTomSelects();
});

// Re-run after Toolset AJAX updates
jQuery(document).on('js_event_wpv_parametric_search_results_updated', function () {
setTimeout(initTomSelects, 100); // optional delay for stability
});
</script>
and
<script type="text/javascript">
//-----------------------------------------
// View slug: search-by-complaint - start
//-----------------------------------------
function setupTomSelectWithBlur() {
document.querySelectorAll('.tom-select-init').forEach(function (el) {
if (!el.classList.contains('ts-initialized')) {
el.classList.add('ts-initialized');

const tom = new TomSelect(el, {
dropdownDirection: 'top'
});

tom.on('change', function () {
this.blur();
if (document.activeElement) {
document.activeElement.blur();
}
});
}
});
}

// Run at load
document.addEventListener('DOMContentLoaded', setupTomSelectWithBlur);

// Watch for Toolset redrawing filters
const observer = new MutationObserver(setupTomSelectWithBlur);

observer.observe(document.body, {
childList: true,
subtree: true
});

jQuery(document).ready(function(){
jQuery('ul.result-items li').each(function() {
var classNames = jQuery(this).attr("class");
jQuery('li.'+classNames).not(':first').hide();
});
});

//-----------------------------------------
// View slug: search-by-complaint - end
//-----------------------------------------
</script>

<script type="text/javascript">
//-----------------------------------------
// Content Template: home-page - start
//-----------------------------------------
// Remove Toolset's TomSelect initialization
document.addEventListener('DOMContentLoaded', function() {
// Override Toolset's functions with empty ones
if (typeof window.initTomSelects === 'function') {
window.initTomSelects = function() {};
}
if (typeof window.setupTomSelectWithBlur === 'function') {
window.setupTomSelectWithBlur = function() {};
}

// Remove any existing mutation observers
if (window.toolsetSelectObserver) {
window.toolsetSelectObserver.disconnect();
}
});
//-----------------------------------------
// Content Template: home-page - end
//-----------------------------------------
</script>
Generated by Toolset. How do I disable (or stop Toolset generating) this built-in TomSelect initialization.
Any help much appreciated