mithril-materialized 3.4.0 → 3.4.1

package/dist/index.umd.js

@@ -232,8 +232,6 @@
             if (attrs.onAutocomplete) {
                 attrs.onAutocomplete(suggestion.key);
             }
-            // Force redraw to update label state
-            m.redraw();
         };
         const handleKeydown = (e, attrs) => {
             if (!state.isOpen)
@@ -312,7 +310,7 @@
                 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);
@@ -327,7 +325,7 @@
                     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) {
@@ -363,14 +361,10 @@
                             }
                         }, 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 &&
@@ -386,7 +380,6 @@
                             },
                             onmouseover: () => {
                                 state.selectedIndex = index;
-                                m.redraw();
                             },
                         }, [
                             // Check if value contains image URL or icon
@@ -2487,36 +2480,52 @@
                 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) {
@@ -2533,15 +2542,18 @@
             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
@@ -2575,19 +2587,24 @@
                     : 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();
@@ -2662,6 +2679,11 @@
                                 updateSingleValue(newValue, false);
                             }
                         },
+                        onblur: () => {
+                            if (disabled || !onchange)
+                                return;
+                            onchange(state.singleValue);
+                        },
                     }, [
                         m(`.track.${orientation}`),
                         m(`.range-progress.${orientation}`, { style: progressStyle }),
@@ -2720,6 +2742,7 @@
                 if (disabled)
                     return;
                 e.preventDefault();
+                e.stopPropagation();
                 state.isDragging = true;
                 state.activeThumb = thumb;
                 if (finalValueDisplay === 'auto') {
@@ -2810,6 +2833,11 @@
                                     maxThumb.focus();
                             }
                         },
+                        onblur: () => {
+                            if (disabled || !attrs.onchange)
+                                return;
+                            attrs.onchange(state.rangeMinValue, state.rangeMaxValue);
+                        },
                     }, [
                         m(`.track.${orientation}`),
                         m(`.range.${orientation}`, { style: rangeStyle }),
@@ -3015,13 +3043,13 @@
                             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);
                             }
@@ -3134,8 +3162,7 @@
             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);
@@ -3185,7 +3212,7 @@
                 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
@@ -4212,14 +4239,12 @@
             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);
@@ -4264,6 +4289,83 @@
                     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;
@@ -4275,9 +4377,18 @@
                 // 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;
@@ -4300,6 +4411,16 @@
                     : 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 }),
@@ -4333,8 +4454,9 @@
                                 }
                             },
                         }),
-                        // 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',
@@ -4784,7 +4906,7 @@
                                 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 &&
@@ -5880,6 +6002,7 @@
             dropdownRef: null,
             internalSelectedIds: [],
             isInsideModal: false,
+            isMultiple: false,
         };
         const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
         const isSelected = (id, selectedIds) => {
@@ -5962,10 +6085,18 @@
             }
         };
         const closeDropdown = (e) => {
+            console.log('select closeDropdown called');
+            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) {
+                console.log('select closeDropdown called: set state');
                 state.isOpen = false;
-                m.redraw();
             }
         };
         const getPortalStyles = (inputRef) => {
@@ -5973,13 +6104,21 @@
                 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) => [
@@ -5987,15 +6126,10 @@
             // 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);
                     },
                 })), [
@@ -6025,8 +6159,8 @@
                 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) => {
@@ -6053,23 +6187,20 @@
                 .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),
@@ -6080,6 +6211,7 @@
                     state.dropdownRef = null;
                 },
             }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
+            // Render to portal
             m.render(portalElement, dropdownVnode);
         };
         return {
@@ -6122,7 +6254,8 @@
             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) {
@@ -6138,7 +6271,6 @@
                     // 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
@@ -6175,7 +6307,8 @@
                             },
                         }),
                         // 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 }) => {
@@ -6333,7 +6466,6 @@
             }
             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) => {
@@ -6360,7 +6492,6 @@
             },
             oncreate: () => {
                 updateIndicator();
-                m.redraw();
             },
             view: ({ attrs }) => {
                 const { tabWidth, tabs, className, style, swipeable = false } = attrs;
@@ -6494,7 +6625,6 @@
             else {
                 // Click outside, close dropdown
                 state.isOpen = false;
-                m.redraw();
             }
         };
         // Handle keyboard navigation
@@ -6729,9 +6859,7 @@
                             ]),
                             // 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

package/dist/utilities.css

@@ -2225,6 +2225,7 @@ table span.badge {
   font-size: 16px;
   line-height: 32px;
   padding-left: 8px;
+  min-height: 1lh;
 }
 
 .chips {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/sass/components/_chips.scss

@@ -33,6 +33,7 @@
     font-size: 16px;
     line-height: 32px;
     padding-left: 8px;
+    min-height: 1lh;
   }
 }
 

package/sass/components/forms/_select.scss

@@ -150,9 +150,9 @@ body.keyboard-focused {
       background-color: var(--mm-dropdown-hover, variables.$select-option-hover);
     }
 
-    &.selected {
-      background-color: var(--mm-dropdown-selected, variables.$select-option-selected);
-    }
+    // &.selected {
+    //   background-color: var(--mm-dropdown-selected, variables.$select-option-selected);
+    // }
   }
 }