recalc actions width

ibexa · Nov 18, 2024 · 664d3c0 · 664d3c0
1 parent 28e8501
commit 664d3c0
Showing 1 changed file with 17 additions and 24 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.input.text.js b/src/bundle/Resources/public/js/scripts/admin.input.text.js
@@ -1,4 +1,5 @@
 (function (global, doc) {
+    const INPUT_PADDING = 12;
     const togglePasswordVisibility = (event) => {
         const passwordTogglerBtn = event.currentTarget;
         const passwordShowIcon = passwordTogglerBtn.querySelector('.ibexa-input-text-wrapper__password-show');
@@ -40,35 +41,27 @@
         passwordTogglerBtns.forEach((passwordTogglerBtn) => passwordTogglerBtn.addEventListener('click', togglePasswordVisibility, false));
         recalculateStyling();
     };
-    const handleInputChange = ({ target: { value } }, btn) => {
-        btn.disabled = value.trim() === '';
-    };
-    const recalculateStyling = () => {
-        const extraBtns = doc.querySelectorAll('.ibexa-input-text-wrapper__action-btn--extra-btn');
-
-        extraBtns.forEach((btn) => {
-            const input = btn.closest('.ibexa-input-text-wrapper').querySelector('input');
-            const clearButton = btn.previousElementSibling?.classList.contains('ibexa-input-text-wrapper__action-btn--clear')
-                ? btn.previousElementSibling
-                : null;
+    const recalculateInputStyling = (inputActionsContainer) => {
+        const input = inputActionsContainer.closest('.ibexa-input-text-wrapper').querySelector('input');
 
-            if (!input) {
-                return;
-            }
+        if (!input) {
+            return;
+        }
 
-            btn.disabled = !input.value;
-            input.addEventListener('input', (inputEvent) => handleInputChange(inputEvent, btn), false);
+        const { width: actionsWidth } = inputActionsContainer.getBoundingClientRect();
 
-            if (!clearButton) {
-                return;
-            }
+        input.style.paddingRight = `${actionsWidth + INPUT_PADDING}px`;
+    };
+    const recalculateStyling = () => {
+        const inputActionsContainers = doc.querySelectorAll('.ibexa-input-text-wrapper__actions');
 
-            const clearButtonStyles = global.getComputedStyle(clearButton);
-            const clearButtonMarginRight = parseInt(clearButtonStyles.getPropertyValue('margin-right'), 10);
-            const clearButtonWidth = parseInt(clearButtonStyles.getPropertyValue('width'), 10);
-            const paddingRight = `${btn.offsetWidth + clearButtonMarginRight + clearButtonWidth}px`;
+        inputActionsContainers.forEach((inputActionsContainer) => {
+            const inputActionsContainerObserver = new ResizeObserver(() => {
+                recalculateInputStyling(inputActionsContainer);
+            });
 
-            input.style.paddingRight = paddingRight;
+            inputActionsContainerObserver.observe(inputActionsContainer);
+            recalculateInputStyling(inputActionsContainer);
         });
     };