mithril-materialized 3.4.0 → 3.4.2

package/README.md

@@ -2,7 +2,7 @@
 
 A Mithril.js component library inspired by [materialize-css](https://materializecss.com) design principles, [available on npm](https://www.npmjs.com/package/mithril-materialized). This library provides you with ready-to-use Mithril components that follow Material Design guidelines, with **no external JavaScript dependencies**.
 
-## 🚀 v3.3 - Latest Release
+## 🚀 v3.4 - Latest Release
 
 The current stable release that provides a complete Mithril.js Material Design component library with no external JavaScript dependencies.
 

package/dist/core.css

@@ -3167,9 +3167,6 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 .select-dropdown.dropdown-content li:hover {
   background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
-.select-dropdown.dropdown-content li.selected {
-  background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
-}
 
 .prefix ~ .select-wrapper {
   margin-left: 3rem;

package/dist/forms.css

@@ -1412,9 +1412,6 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 .select-dropdown.dropdown-content li:hover {
   background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
-.select-dropdown.dropdown-content li.selected {
-  background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
-}
 
 .prefix ~ .select-wrapper {
   margin-left: 3rem;

package/dist/index.css

@@ -5632,6 +5632,7 @@ body.keyboard-focused .dropdown-content li:focus {
   font-size: 16px;
   line-height: 32px;
   padding-left: 8px;
+  min-height: 1lh;
 }
 
 .chips {
@@ -6846,9 +6847,6 @@ body.keyboard-focused .select-dropdown.dropdown-content li:focus {
 .select-dropdown.dropdown-content li:hover {
   background-color: var(--mm-dropdown-hover, rgba(0, 0, 0, 0.08));
 }
-.select-dropdown.dropdown-content li.selected {
-  background-color: var(--mm-dropdown-selected, rgba(0, 0, 0, 0.03));
-}
 
 .prefix ~ .select-wrapper {
   margin-left: 3rem;

package/dist/index.esm.js

@@ -228,8 +228,6 @@ const Autocomplete = () => {
         if (attrs.onAutocomplete) {
             attrs.onAutocomplete(suggestion.key);
         }
-        // Force redraw to update label state
-        m.redraw();
     };
     const handleKeydown = (e, attrs) => {
         if (!state.isOpen)
@@ -308,7 +306,7 @@ const Autocomplete = () => {
             const id = attrs.id || state.id;
             const { label, helperText, onchange, newRow, className = 'col s12', style, iconName, isMandatory, data = {}, limit = Infinity, minLength = 1 } = attrs, params = __rest(attrs, ["label", "helperText", "onchange", "newRow", "className", "style", "iconName", "isMandatory", "data", "limit", "minLength"]);
             const controlled = isControlled(attrs);
-            const currentValue = controlled ? (attrs.value || '') : state.internalValue;
+            const currentValue = controlled ? attrs.value || '' : state.internalValue;
             const cn = newRow ? className + ' clear' : className;
             // Update suggestions when input changes
             state.suggestions = filterSuggestions(currentValue, data, limit, minLength);
@@ -323,7 +321,7 @@ const Autocomplete = () => {
                 style,
             }, [
                 iconName ? m('i.material-icons.prefix', iconName) : '',
-                m('input', Object.assign(Object.assign({}, params), { className: 'autocomplete', type: 'text', tabindex: 0, id, value: controlled ? currentValue : undefined, oncreate: (vnode) => {
+                m('input', Object.assign(Object.assign({}, params), { className: 'autocomplete', type: 'text', tabindex: 0, id, value: currentValue, oncreate: (vnode) => {
                         state.inputElement = vnode.dom;
                         // Set initial value for uncontrolled mode
                         if (!controlled && attrs.defaultValue) {
@@ -359,14 +357,10 @@ const Autocomplete = () => {
                         }
                     }, onblur: (e) => {
                         state.isActive = false;
-                        // Delay closing to allow clicks on suggestions
-                        setTimeout(() => {
-                            if (!e.relatedTarget || !e.relatedTarget.closest('.autocomplete-content')) {
-                                state.isOpen = false;
-                                state.selectedIndex = -1;
-                                m.redraw();
-                            }
-                        }, 150);
+                        if (!e.relatedTarget || !e.relatedTarget.closest('.autocomplete-content')) {
+                            state.isOpen = false;
+                            state.selectedIndex = -1;
+                        }
                     } })),
                 // Autocomplete dropdown
                 state.isOpen &&
@@ -382,7 +376,6 @@ const Autocomplete = () => {
                         },
                         onmouseover: () => {
                             state.selectedIndex = index;
-                            m.redraw();
                         },
                     }, [
                         // Check if value contains image URL or icon
@@ -2483,36 +2476,52 @@ const handleKeyboardNavigation = (key, currentValue, min, max, step) => {
             return null;
     }
 };
+const isControlled = (attrs) => {
+    return attrs.value !== undefined && typeof attrs.oninput === 'function';
+};
+const isRangeControlled = (attrs) => {
+    return (attrs.minValue !== undefined || attrs.maxValue !== undefined) && typeof attrs.oninput === 'function';
+};
 const initRangeState = (state, attrs) => {
-    const { min = 0, max = 100, value, minValue, maxValue } = attrs;
+    const { min = 0, max = 100, value, minValue, maxValue, defaultValue } = attrs;
     // Initialize single range value
-    if (value !== undefined) {
-        const currentValue = value;
+    if (isControlled(attrs)) {
+        // Always use value from props in controlled mode
+        state.singleValue = value !== undefined ? value : min;
+    }
+    else {
+        // Use internal state for uncontrolled mode
         if (state.singleValue === undefined) {
-            state.singleValue = currentValue;
+            state.singleValue = defaultValue !== undefined ? defaultValue : value !== undefined ? value : min;
         }
-        if (state.lastValue !== value && !state.hasUserInteracted) {
+        // Only update internal state if props changed and user hasn't interacted
+        if (state.lastValue !== value && !state.hasUserInteracted && value !== undefined) {
             state.singleValue = value;
             state.lastValue = value;
         }
     }
-    else if (state.singleValue === undefined) {
-        state.singleValue = min;
-    }
     // Initialize range values
-    const currentMinValue = minValue !== undefined ? minValue : min;
-    const currentMaxValue = maxValue !== undefined ? maxValue : max;
-    if (state.rangeMinValue === undefined || state.rangeMaxValue === undefined) {
-        state.rangeMinValue = currentMinValue;
-        state.rangeMaxValue = currentMaxValue;
+    if (isRangeControlled(attrs)) {
+        // Always use values from props in controlled mode
+        state.rangeMinValue = minValue !== undefined ? minValue : min;
+        state.rangeMaxValue = maxValue !== undefined ? maxValue : max;
     }
-    if (!state.hasUserInteracted &&
-        ((minValue !== undefined && state.lastMinValue !== minValue) ||
-            (maxValue !== undefined && state.lastMaxValue !== maxValue))) {
-        state.rangeMinValue = currentMinValue;
-        state.rangeMaxValue = currentMaxValue;
-        state.lastMinValue = minValue;
-        state.lastMaxValue = maxValue;
+    else {
+        // Use internal state for uncontrolled mode
+        const currentMinValue = minValue !== undefined ? minValue : min;
+        const currentMaxValue = maxValue !== undefined ? maxValue : max;
+        if (state.rangeMinValue === undefined || state.rangeMaxValue === undefined) {
+            state.rangeMinValue = currentMinValue;
+            state.rangeMaxValue = currentMaxValue;
+        }
+        if (!state.hasUserInteracted &&
+            ((minValue !== undefined && state.lastMinValue !== minValue) ||
+                (maxValue !== undefined && state.lastMaxValue !== maxValue))) {
+            state.rangeMinValue = currentMinValue;
+            state.rangeMaxValue = currentMaxValue;
+            state.lastMinValue = minValue;
+            state.lastMaxValue = maxValue;
+        }
     }
     // Initialize active thumb if not set
     if (state.activeThumb === null) {
@@ -2529,15 +2538,18 @@ const updateRangeValues = (minValue, maxValue, attrs, state, immediate) => {
         minValue = maxValue;
     if (maxValue < minValue)
         maxValue = minValue;
-    state.rangeMinValue = minValue;
-    state.rangeMaxValue = maxValue;
+    // Only update internal state for uncontrolled mode
+    if (!isRangeControlled(attrs)) {
+        state.rangeMinValue = minValue;
+        state.rangeMaxValue = maxValue;
+    }
     state.hasUserInteracted = true;
-    // Call oninput for immediate feedback or onchange for final changes
+    // Call appropriate handler based on interaction type, not control mode
     if (immediate && attrs.oninput) {
-        attrs.oninput(minValue, maxValue);
+        attrs.oninput(minValue, maxValue); // Immediate feedback during drag
     }
-    else if (!immediate && attrs.onchange) {
-        attrs.onchange(minValue, maxValue);
+    if (!immediate && attrs.onchange) {
+        attrs.onchange(minValue, maxValue); // Final value on interaction end (blur/mouseup)
     }
 };
 // Single Range Slider Component
@@ -2571,19 +2583,24 @@ const SingleRangeSlider = {
                 : tooltipPos
             : tooltipPos;
         const updateSingleValue = (newValue, immediate = false) => {
-            state.singleValue = newValue;
+            // Only update internal state for uncontrolled mode
+            if (!isControlled(attrs)) {
+                state.singleValue = newValue;
+            }
             state.hasUserInteracted = true;
+            // Call appropriate handler based on interaction type, not control mode
             if (immediate && oninput) {
-                oninput(newValue);
+                oninput(newValue); // Immediate feedback during drag
             }
-            else if (!immediate && onchange) {
-                onchange(newValue);
+            if (!immediate && onchange) {
+                onchange(newValue); // Final value on interaction end (blur/mouseup)
             }
         };
         const handleMouseDown = (e) => {
             if (disabled)
                 return;
             e.preventDefault();
+            e.stopPropagation();
             state.isDragging = true;
             if (finalValueDisplay === 'auto') {
                 m.redraw();
@@ -2658,6 +2675,11 @@ const SingleRangeSlider = {
                             updateSingleValue(newValue, false);
                         }
                     },
+                    onblur: () => {
+                        if (disabled || !onchange)
+                            return;
+                        onchange(state.singleValue);
+                    },
                 }, [
                     m(`.track.${orientation}`),
                     m(`.range-progress.${orientation}`, { style: progressStyle }),
@@ -2716,6 +2738,7 @@ const DoubleRangeSlider = {
             if (disabled)
                 return;
             e.preventDefault();
+            e.stopPropagation();
             state.isDragging = true;
             state.activeThumb = thumb;
             if (finalValueDisplay === 'auto') {
@@ -2806,6 +2829,11 @@ const DoubleRangeSlider = {
                                 maxThumb.focus();
                         }
                     },
+                    onblur: () => {
+                        if (disabled || !attrs.onchange)
+                            return;
+                        attrs.onchange(state.rangeMinValue, state.rangeMaxValue);
+                    },
                 }, [
                     m(`.track.${orientation}`),
                     m(`.range.${orientation}`, { style: rangeStyle }),
@@ -3011,13 +3039,13 @@ const TextArea = () => {
                         overflowWrap: 'break-word',
                     },
                     oncreate: ({ dom }) => {
-                        const hiddenDiv = state.hiddenDiv = dom;
+                        const hiddenDiv = (state.hiddenDiv = dom);
                         if (state.textarea) {
                             updateHeight(state.textarea, hiddenDiv);
                         }
                     },
                     onupdate: ({ dom }) => {
-                        const hiddenDiv = state.hiddenDiv = dom;
+                        const hiddenDiv = (state.hiddenDiv = dom);
                         if (state.textarea) {
                             updateHeight(state.textarea, hiddenDiv);
                         }
@@ -3130,8 +3158,7 @@ const InputField = (type, defaultClass = '') => () => {
         isDragging: false,
         activeThumb: null,
     };
-    const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' &&
-        (typeof attrs.oninput === 'function' || typeof attrs.onchange === 'function');
+    const isControlled = (attrs) => 'value' in attrs && typeof attrs.value !== 'undefined' && typeof attrs.oninput === 'function';
     const getValue = (target) => {
         const val = target.value;
         return (val ? (type === 'number' || type === 'range' ? +val : val) : val);
@@ -3181,7 +3208,7 @@ const InputField = (type, defaultClass = '') => () => {
             const isNonInteractive = attrs.readonly || attrs.disabled;
             // Warn developer for improper controlled usage
             if (attrs.value !== undefined && !controlled && !isNonInteractive) {
-                console.warn(`${type} input received 'value' prop without 'oninput' or 'onchange' handler. ` +
+                console.warn(`${type} input with label '${attrs.label}' received 'value' prop without 'oninput' handler. ` +
                     `Use 'defaultValue' for uncontrolled components or add an event handler for controlled components.`);
             }
             // Initialize internal value if not in controlled mode
@@ -4208,14 +4235,12 @@ const Dropdown = () => {
         inputRef: null,
         dropdownRef: null,
         internalCheckedId: undefined,
+        isInsideModal: false,
     };
     const isControlled = (attrs) => attrs.checkedId !== undefined && typeof attrs.onchange === 'function';
-    const closeDropdown = (e) => {
-        const target = e.target;
-        if (!target.closest('.dropdown-wrapper.input-field')) {
-            state.isOpen = false;
-            m.redraw();
-        }
+    const closeDropdown = () => {
+        state.isOpen = false;
+        m.redraw(); // Needed to remove the dropdown options list (potentially added to document root)
     };
     const handleKeyDown = (e, items) => {
         const availableItems = items.filter((item) => !item.divider && !item.disabled);
@@ -4260,6 +4285,83 @@ const Dropdown = () => {
                 return undefined;
         }
     };
+    const getPortalStyles = (inputRef) => {
+        if (!inputRef)
+            return {};
+        const rect = inputRef.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        // Choose whether to show above or below based on available space
+        const showAbove = spaceBelow < 200 && spaceAbove > spaceBelow;
+        return {
+            position: 'fixed',
+            top: showAbove ? 'auto' : `${rect.bottom}px`,
+            bottom: showAbove ? `${viewportHeight - rect.top}px` : 'auto',
+            left: `${rect.left}px`,
+            width: `${rect.width}px`,
+            zIndex: 10000,
+            maxHeight: showAbove ? `${spaceAbove - 20}px` : `${spaceBelow - 20}px`,
+            overflow: 'auto',
+            display: 'block',
+            opacity: 1,
+        };
+    };
+    const updatePortalDropdown = (items, selectedLabel, onSelectItem) => {
+        if (!state.isInsideModal)
+            return;
+        // Clean up existing portal
+        const existingPortal = document.getElementById(`${state.id}-dropdown`);
+        if (existingPortal) {
+            existingPortal.remove();
+        }
+        if (!state.isOpen || !state.inputRef)
+            return;
+        // Create portal element
+        const portalElement = document.createElement('div');
+        portalElement.id = `${state.id}-dropdown`;
+        document.body.appendChild(portalElement);
+        // Create dropdown content
+        const availableItems = items.filter((item) => !item.divider && !item.disabled);
+        const dropdownContent = items.map((item) => {
+            if (item.divider) {
+                return m('li.divider');
+            }
+            const itemIndex = availableItems.indexOf(item);
+            const isSelected = selectedLabel === item.label;
+            const isFocused = state.focusedIndex === itemIndex;
+            return m('li', {
+                class: `${isSelected ? 'selected' : ''} ${isFocused ? 'focused' : ''}${item.disabled ? ' disabled' : ''}`,
+                onclick: item.disabled ? undefined : () => onSelectItem(item),
+            }, m('span', {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: '14px 16px',
+                },
+            }, [
+                item.iconName
+                    ? m('i.material-icons', {
+                        style: { marginRight: '32px' },
+                    }, item.iconName)
+                    : undefined,
+                item.label,
+            ]));
+        });
+        // Create dropdown with proper positioning
+        const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
+            tabindex: 0,
+            style: getPortalStyles(state.inputRef),
+            oncreate: ({ dom }) => {
+                state.dropdownRef = dom;
+            },
+            onremove: () => {
+                state.dropdownRef = null;
+            },
+        }, dropdownContent);
+        // Render to portal
+        m.render(portalElement, dropdownVnode);
+    };
     return {
         oninit: ({ attrs }) => {
             var _a;
@@ -4271,9 +4373,18 @@ const Dropdown = () => {
             // Add global click listener to close dropdown
             document.addEventListener('click', closeDropdown);
         },
+        oncreate: ({ dom }) => {
+            // Detect if component is inside a modal
+            state.isInsideModal = !!dom.closest('.modal');
+        },
         onremove: () => {
             // Cleanup global listener
             document.removeEventListener('click', closeDropdown);
+            // Cleanup portal
+            const portalElement = document.getElementById(`${state.id}-dropdown`);
+            if (portalElement) {
+                portalElement.remove();
+            }
         },
         view: ({ attrs }) => {
             const { checkedId, key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12', } = attrs;
@@ -4296,6 +4407,16 @@ const Dropdown = () => {
                 : undefined;
             const title = selectedItem ? selectedItem.label : label || 'Select';
             const availableItems = items.filter((item) => !item.divider && !item.disabled);
+            // Update portal dropdown when inside modal
+            if (state.isInsideModal) {
+                updatePortalDropdown(items, title, (item) => {
+                    if (item.id) {
+                        state.isOpen = false;
+                        state.focusedIndex = -1;
+                        handleSelection(item.id);
+                    }
+                });
+            }
             return m('.dropdown-wrapper.input-field', { className, key, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
                 m(HelperText, { helperText }),
@@ -4329,8 +4450,9 @@ const Dropdown = () => {
                             }
                         },
                     }),
-                    // Dropdown Menu using Select component's positioning logic
+                    // Dropdown Menu - render inline only when NOT inside modal
                     state.isOpen &&
+                        !state.isInsideModal &&
                         m('ul.dropdown-content.select-dropdown', {
                             tabindex: 0,
                             role: 'listbox',
@@ -4780,7 +4902,7 @@ const ModalPanel = () => {
                             maxWidth: '75%',
                             borderRadius: '4px',
                         })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
-                    onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
+                    // onclick: (e: Event) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
                 }, [
                     // Close button
                     showCloseButton &&
@@ -5876,6 +5998,7 @@ const Select = () => {
         dropdownRef: null,
         internalSelectedIds: [],
         isInsideModal: false,
+        isMultiple: false,
     };
     const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
     const isSelected = (id, selectedIds) => {
@@ -5958,10 +6081,16 @@ const Select = () => {
         }
     };
     const closeDropdown = (e) => {
+        if (!state.isMultiple) {
+            state.isOpen = false;
+            return;
+        }
         const target = e.target;
-        if (!target.closest('.input-field.select-space')) {
+        // When inside modal, check both the select component AND the portaled dropdown
+        const isClickInsideSelect = target.closest('.input-field.select-space');
+        const isClickInsidePortalDropdown = state.isInsideModal && state.dropdownRef && (state.dropdownRef.contains(target) || target === state.dropdownRef);
+        if (!isClickInsideSelect && !isClickInsidePortalDropdown) {
             state.isOpen = false;
-            m.redraw();
         }
     };
     const getPortalStyles = (inputRef) => {
@@ -5969,13 +6098,21 @@ const Select = () => {
             return {};
         const rect = inputRef.getBoundingClientRect();
         const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        // Choose whether to show above or below based on available space
+        const showAbove = spaceBelow < 200 && spaceAbove > spaceBelow;
         return {
             position: 'fixed',
-            top: `${rect.bottom}px`,
+            top: showAbove ? 'auto' : `${rect.bottom}px`,
+            bottom: showAbove ? `${viewportHeight - rect.top}px` : 'auto',
             left: `${rect.left}px`,
             width: `${rect.width}px`,
             zIndex: 10000, // Higher than modal z-index
-            maxHeight: `${viewportHeight - rect.bottom - 20}px`, // Leave 20px margin from bottom
+            maxHeight: showAbove ? `${spaceAbove - 20}px` : `${spaceBelow - 20}px`, // Leave 20px margin
+            overflow: 'auto',
+            display: 'block',
+            opacity: 1,
         };
     };
     const renderDropdownContent = (attrs, selectedIds, multiple, placeholder) => [
@@ -5983,15 +6120,10 @@ const Select = () => {
         // Render ungrouped options first
         attrs.options
             .filter((option) => !option.group)
-            .map((option) => m('li', Object.assign({ key: option.id, class: option.disabled
-                ? 'disabled'
-                : state.focusedIndex === attrs.options.indexOf(option)
-                    ? 'focused'
-                    : '' }, (option.disabled
+            .map((option) => m('li', Object.assign({ class: option.disabled ? 'disabled' : state.focusedIndex === attrs.options.indexOf(option) ? 'focused' : '' }, (option.disabled
             ? {}
             : {
-                onclick: (e) => {
-                    e.stopPropagation();
+                onclick: () => {
                     toggleOption(option.id, multiple, attrs);
                 },
             })), [
@@ -6021,8 +6153,8 @@ const Select = () => {
             return groups;
         }, {}))
             .map(([groupName, groupOptions]) => [
-            m('li.optgroup', { key: `group-${groupName}`, tabindex: 0 }, m('span', groupName)),
-            ...groupOptions.map((option) => m('li', Object.assign({ key: option.id, class: `optgroup-option${option.disabled ? ' disabled' : ''}${isSelected(option.id, selectedIds) ? ' selected' : ''}${state.focusedIndex === attrs.options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
+            m('li.optgroup', { tabindex: 0 }, m('span', groupName)),
+            ...groupOptions.map((option) => m('li', Object.assign({ class: `optgroup-option${option.disabled ? ' disabled' : ''}${isSelected(option.id, selectedIds) ? ' selected' : ''}${state.focusedIndex === attrs.options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
                 ? {}
                 : {
                     onclick: (e) => {
@@ -6049,23 +6181,20 @@ const Select = () => {
             .reduce((acc, val) => acc.concat(val), []),
     ];
     const updatePortalDropdown = (attrs, selectedIds, multiple, placeholder) => {
-        var _a;
         if (!state.isInsideModal)
             return;
-        let portalElement = document.getElementById(state.dropdownId);
-        if (!state.isOpen) {
-            // Clean up portal when dropdown is closed
-            if (portalElement) {
-                m.render(portalElement, []);
-                (_a = portalElement.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(portalElement);
-            }
-            return;
-        }
-        if (!portalElement) {
-            portalElement = document.createElement('div');
-            portalElement.id = state.dropdownId;
-            document.body.appendChild(portalElement);
+        // Clean up existing portal
+        const existingPortal = document.getElementById(state.dropdownId);
+        if (existingPortal) {
+            existingPortal.remove();
         }
+        if (!state.isOpen || !state.inputRef)
+            return;
+        // Create portal element
+        const portalElement = document.createElement('div');
+        portalElement.id = state.dropdownId;
+        document.body.appendChild(portalElement);
+        // Create dropdown with proper positioning
         const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
             tabindex: 0,
             style: getPortalStyles(state.inputRef),
@@ -6076,6 +6205,7 @@ const Select = () => {
                 state.dropdownRef = null;
             },
         }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
+        // Render to portal
         m.render(portalElement, dropdownVnode);
     };
     return {
@@ -6118,7 +6248,8 @@ const Select = () => {
         view: ({ attrs }) => {
             var _a;
             const controlled = isControlled(attrs);
-            const { disabled } = attrs;
+            const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, style, disabled, } = attrs;
+            state.isMultiple = multiple;
             // Get selected IDs from props or internal state
             let selectedIds;
             if (controlled) {
@@ -6134,7 +6265,6 @@ const Select = () => {
                 // Interactive uncontrolled: use internal state
                 selectedIds = state.internalSelectedIds;
             }
-            const { newRow, className = 'col s12', key, options, multiple = false, label, helperText, placeholder = '', isMandatory, iconName, style, } = attrs;
             const finalClassName = newRow ? `${className} clear` : className;
             const selectedOptions = options.filter((opt) => isSelected(opt.id, selectedIds));
             // Update portal dropdown when inside modal
@@ -6171,7 +6301,8 @@ const Select = () => {
                         },
                     }),
                     // Dropdown Menu - render inline only when NOT inside modal
-                    state.isOpen && !state.isInsideModal &&
+                    state.isOpen &&
+                        !state.isInsideModal &&
                         m('ul.dropdown-content.select-dropdown', {
                             tabindex: 0,
                             oncreate: ({ dom }) => {
@@ -6329,7 +6460,6 @@ const Tabs = () => {
         }
         state.isDragging = false;
         state.translateX = 0;
-        // m.redraw();
     };
     /** Initialize active tab - selectedTabId takes precedence, next active property or first available tab */
     const setActiveTabId = (anchoredTabs, selectedTabId) => {
@@ -6356,7 +6486,6 @@ const Tabs = () => {
         },
         oncreate: () => {
             updateIndicator();
-            m.redraw();
         },
         view: ({ attrs }) => {
             const { tabWidth, tabs, className, style, swipeable = false } = attrs;
@@ -6490,7 +6619,6 @@ const SearchSelect = () => {
         else {
             // Click outside, close dropdown
             state.isOpen = false;
-            m.redraw();
         }
     };
     // Handle keyboard navigation
@@ -6725,9 +6853,7 @@ const SearchSelect = () => {
                         ]),
                         // No options found message or list of options
                         ...(filteredOptions.length === 0 && !showAddNew
-                            ? [
-                                m('li.search-select-no-options', texts.noOptionsFound),
-                            ]
+                            ? [m('li.search-select-no-options', texts.noOptionsFound)]
                             : []),
                         // Add new option item
                         ...(showAddNew