From dc76ed31563ab385ae13251cf05f9fb51f47ae3a Mon Sep 17 00:00:00 2001
From: Herculino Trotta <hello@herculino.com>
Date: Thu, 23 Apr 2026 23:29:42 -0300
Subject: [PATCH] fix(tom-select): dropdown covers select field when height 
 increases

Co-authored-by: Copilot <copilot@github.com>
---
 frontend/src/js/select.js | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/js/select.js b/frontend/src/js/select.js
index 25dec9c..319b85e 100644
--- a/frontend/src/js/select.js
+++ b/frontend/src/js/select.js
@@ -4,6 +4,15 @@ import '../styles/_tom-select.scss'
 
 
 window.TomSelect = function createDynamicTomSelect(element) {
+    const schedulePopperUpdate = function (instance) {
+        // Wait for TomSelect DOM updates before recalculating dropdown position.
+        requestAnimationFrame(() => {
+            if (instance.popper) {
+                instance.popper.update();
+            }
+        });
+    };
+
     // Basic configuration
     const config = {
         plugins: {},
@@ -27,10 +36,16 @@ window.TomSelect = function createDynamicTomSelect(element) {
             this.popper = Popper.createPopper(this.control, this.dropdown, {
                 placement: "bottom-start",
                 modifiers: [
+                    {
+                        name: "offset",
+                        options: {
+                            offset: [0, 4],
+                        },
+                    },
                     {
                         name: "sameWidth",
                         enabled: true,
-                        fn: ({state}) => {
+                        fn: ({ state }) => {
                             state.styles.popper.width = `${state.rects.reference.width}px`;
                         },
                         phase: "beforeWrite",
@@ -48,8 +63,17 @@ window.TomSelect = function createDynamicTomSelect(element) {
 
         },
         onDropdownOpen: function () {
-            this.popper.update();
-        }
+            schedulePopperUpdate(this);
+        },
+        onItemAdd: function () {
+            schedulePopperUpdate(this);
+        },
+        onItemRemove: function () {
+            schedulePopperUpdate(this);
+        },
+        onClear: function () {
+            schedulePopperUpdate(this);
+        },
     };
 
     if (element.dataset.checkboxes === 'true') {