npm - mithril-materialized - Versions diffs - 3.3.6 → 3.3.8 - Mend

mithril-materialized 3.3.6 → 3.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.esm.js CHANGED Viewed

@@ -2811,6 +2811,7 @@ const TextArea = () => {
         height: undefined,
         active: false,
         textarea: undefined,
+        hiddenDiv: undefined,
         internalValue: '',
     };
     const updateHeight = (textarea, hiddenDiv) => {
@@ -2907,13 +2908,13 @@ const TextArea = () => {
                         overflowWrap: 'break-word',
                     },
                     oncreate: ({ dom }) => {
-                        const hiddenDiv = dom;
+                        const hiddenDiv = state.hiddenDiv = dom;
                         if (state.textarea) {
                             updateHeight(state.textarea, hiddenDiv);
                         }
                     },
                     onupdate: ({ dom }) => {
-                        const hiddenDiv = dom;
+                        const hiddenDiv = state.hiddenDiv = dom;
                         if (state.textarea) {
                             updateHeight(state.textarea, hiddenDiv);
                         }
@@ -2938,7 +2939,10 @@ const TextArea = () => {
                             const textarea = dom;
                             if (state.height)
                                 textarea.style.height = state.height;
-                            // No need to manually sync in onupdate since value attribute handles it
+                            // Trigger height recalculation when value changes programmatically
+                            if (state.hiddenDiv) {
+                                updateHeight(textarea, state.hiddenDiv);
+                            }
                         }, onfocus: () => {
                             state.active = true;
                         }, oninput: (e) => {
@@ -3098,9 +3102,6 @@ const InputField = (type, defaultClass = '') => () => {
             const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
             // const attributes = toAttrs(params);
             const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
-            const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
-                ? true
-                : false;
             // Special rendering for minmax range sliders
             if (type === 'range' && (attrs.minmax || attrs.valueDisplay)) {
                 return m(attrs.minmax ? DoubleRangeSlider : SingleRangeSlider, Object.assign(Object.assign({}, attrs), { state,
@@ -3121,12 +3122,15 @@ const InputField = (type, defaultClass = '') => () => {
             }
             else if (isNonInteractive) {
                 // Non-interactive components: prefer defaultValue, fallback to value
-                value = ((_c = (_b = attrs.defaultValue) !== null && _b !== void 0 ? _b : attrs.value) !== null && _c !== void 0 ? _c : (isNumeric ? 0 : ''));
+                value = ((_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value) !== null && _b !== void 0 ? _b : (isNumeric ? 0 : ''));
             }
             else {
                 // Interactive uncontrolled: use internal state
-                value = ((_e = (_d = state.internalValue) !== null && _d !== void 0 ? _d : attrs.defaultValue) !== null && _e !== void 0 ? _e : (isNumeric ? 0 : ''));
+                value = ((_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : (isNumeric ? 0 : ''));
             }
+            const isActive = state.active || ((_e = state.inputElement) === null || _e === void 0 ? void 0 : _e.value) || value || placeholder || type === 'color' || type === 'range'
+                ? true
+                : false;
             const rangeType = type === 'range' && !attrs.minmax;
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
@@ -5752,11 +5756,13 @@ const RadioButtons = () => {
 const Select = () => {
     const state = {
         id: '',
+        dropdownId: '',
         isOpen: false,
         focusedIndex: -1,
         inputRef: null,
         dropdownRef: null,
         internalSelectedIds: [],
+        isInsideModal: false,
     };
     const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
     const isSelected = (id, selectedIds) => {
@@ -5845,9 +5851,124 @@ const Select = () => {
             m.redraw();
         }
     };
+    const getPortalStyles = (inputRef) => {
+        if (!inputRef)
+            return {};
+        const rect = inputRef.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        return {
+            position: 'fixed',
+            top: `${rect.bottom}px`,
+            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
+        };
+    };
+    const renderDropdownContent = (attrs, selectedIds, multiple, placeholder) => [
+        placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
+        // 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
+            ? {}
+            : {
+                onclick: (e) => {
+                    e.stopPropagation();
+                    toggleOption(option.id, multiple, attrs);
+                },
+            })), [
+            option.img && m('img', { src: option.img, alt: option.label }),
+            m('span', [
+                multiple
+                    ? m('label', { for: option.id }, m('input', {
+                        id: option.id,
+                        type: 'checkbox',
+                        checked: selectedIds.includes(option.id),
+                        disabled: option.disabled ? true : undefined,
+                        onclick: (e) => {
+                            e.stopPropagation();
+                        },
+                    }), m('span', option.label))
+                    : m('span', option.label),
+            ].filter(Boolean)),
+        ])),
+        // Render grouped options
+        Object.entries(attrs.options
+            .filter((option) => option.group)
+            .reduce((groups, option) => {
+            const group = option.group;
+            if (!groups[group])
+                groups[group] = [];
+            groups[group].push(option);
+            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
+                ? {}
+                : {
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        toggleOption(option.id, multiple, attrs);
+                    },
+                })), [
+                option.img && m('img', { src: option.img, alt: option.label }),
+                m('span', [
+                    multiple
+                        ? m('label', { for: option.id }, m('input', {
+                            id: option.id,
+                            type: 'checkbox',
+                            checked: selectedIds.includes(option.id),
+                            disabled: option.disabled ? true : undefined,
+                            onclick: (e) => {
+                                e.stopPropagation();
+                            },
+                        }), m('span', option.label))
+                        : m('span', option.label),
+                ].filter(Boolean)),
+            ])),
+        ])
+            .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);
+        }
+        const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
+            tabindex: 0,
+            style: getPortalStyles(state.inputRef),
+            oncreate: ({ dom }) => {
+                state.dropdownRef = dom;
+            },
+            onremove: () => {
+                state.dropdownRef = null;
+            },
+        }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
+        m.render(portalElement, dropdownVnode);
+    };
     return {
         oninit: ({ attrs }) => {
             state.id = attrs.id || uniqueId();
+            state.dropdownId = `${state.id}-dropdown`;
             const controlled = isControlled(attrs);
             // Warn developer for improper controlled usage
             if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
@@ -5866,9 +5987,20 @@ const Select = () => {
             // 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 portaled dropdown if it exists
+            if (state.isInsideModal && state.dropdownRef) {
+                const portalElement = document.getElementById(state.dropdownId);
+                if (portalElement && portalElement.parentNode) {
+                    portalElement.parentNode.removeChild(portalElement);
+                }
+            }
         },
         view: ({ attrs }) => {
             var _a;
@@ -5877,20 +6009,13 @@ const Select = () => {
             // Get selected IDs from props or internal state
             let selectedIds;
             if (controlled) {
-                selectedIds = attrs.checkedId !== undefined
-                    ? Array.isArray(attrs.checkedId)
-                        ? attrs.checkedId
-                        : [attrs.checkedId]
-                    : [];
+                selectedIds =
+                    attrs.checkedId !== undefined ? (Array.isArray(attrs.checkedId) ? attrs.checkedId : [attrs.checkedId]) : [];
             }
             else if (disabled) {
                 // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
                 const fallbackId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : attrs.checkedId;
-                selectedIds = fallbackId !== undefined
-                    ? Array.isArray(fallbackId)
-                        ? fallbackId
-                        : [fallbackId]
-                    : [];
+                selectedIds = fallbackId !== undefined ? (Array.isArray(fallbackId) ? fallbackId : [fallbackId]) : [];
             }
             else {
                 // Interactive uncontrolled: use internal state
@@ -5899,6 +6024,10 @@ const Select = () => {
             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
+            if (state.isInsideModal) {
+                updatePortalDropdown(attrs, selectedIds, multiple, placeholder);
+            }
             return m('.input-field.select-space', {
                 className: finalClassName,
                 key,
@@ -5911,6 +6040,7 @@ const Select = () => {
                     tabindex: disabled ? -1 : 0,
                     'aria-expanded': state.isOpen ? 'true' : 'false',
                     'aria-haspopup': 'listbox',
+                    'aria-controls': state.dropdownId,
                     role: 'combobox',
                 }, [
                     m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
@@ -5927,8 +6057,8 @@ const Select = () => {
                             }
                         },
                     }),
-                    // Dropdown Menu
-                    state.isOpen &&
+                    // Dropdown Menu - render inline only when NOT inside modal
+                    state.isOpen && !state.isInsideModal &&
                         m('ul.dropdown-content.select-dropdown', {
                             tabindex: 0,
                             oncreate: ({ dom }) => {
@@ -5938,66 +6068,7 @@ const Select = () => {
                                 state.dropdownRef = null;
                             },
                             style: getDropdownStyles(state.inputRef, true, options),
-                        }, [
-                            placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
-                            // Render ungrouped options first
-                            options
-                                .filter((option) => !option.group)
-                                .map((option) => m('li', Object.assign({ key: option.id, class: option.disabled
-                                    ? 'disabled'
-                                    : state.focusedIndex === options.indexOf(option)
-                                        ? 'focused'
-                                        : '' }, (option.disabled
-                                ? {}
-                                : {
-                                    onclick: (e) => {
-                                        e.stopPropagation();
-                                        toggleOption(option.id, multiple, attrs);
-                                    },
-                                })), m('span', multiple
-                                ? m('label', { for: option.id }, m('input', {
-                                    id: option.id,
-                                    type: 'checkbox',
-                                    checked: selectedIds.includes(option.id),
-                                    disabled: option.disabled ? true : undefined,
-                                    onclick: (e) => {
-                                        e.stopPropagation();
-                                    },
-                                }), m('span', option.label))
-                                : option.label))),
-                            // Render grouped options
-                            Object.entries(options
-                                .filter((option) => option.group)
-                                .reduce((groups, option) => {
-                                const group = option.group;
-                                if (!groups[group])
-                                    groups[group] = [];
-                                groups[group].push(option);
-                                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 === options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
-                                    ? {}
-                                    : {
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                            toggleOption(option.id, multiple, attrs);
-                                        },
-                                    })), m('span', multiple
-                                    ? m('label', { for: option.id }, m('input', {
-                                        id: option.id,
-                                        type: 'checkbox',
-                                        checked: selectedIds.includes(option.id),
-                                        disabled: option.disabled ? true : undefined,
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                        },
-                                    }), m('span', option.label))
-                                    : option.label))),
-                            ])
-                                .reduce((acc, val) => acc.concat(val), []),
-                        ]),
+                        }, renderDropdownContent(attrs, selectedIds, multiple, placeholder)),
                     m(MaterialIcon, {
                         name: 'caret',
                         direction: 'down',

package/dist/index.js CHANGED Viewed

@@ -2813,6 +2813,7 @@ const TextArea = () => {
         height: undefined,
         active: false,
         textarea: undefined,
+        hiddenDiv: undefined,
         internalValue: '',
     };
     const updateHeight = (textarea, hiddenDiv) => {
@@ -2909,13 +2910,13 @@ const TextArea = () => {
                         overflowWrap: 'break-word',
                     },
                     oncreate: ({ dom }) => {
-                        const hiddenDiv = dom;
+                        const hiddenDiv = state.hiddenDiv = dom;
                         if (state.textarea) {
                             updateHeight(state.textarea, hiddenDiv);
                         }
                     },
                     onupdate: ({ dom }) => {
-                        const hiddenDiv = dom;
+                        const hiddenDiv = state.hiddenDiv = dom;
                         if (state.textarea) {
                             updateHeight(state.textarea, hiddenDiv);
                         }
@@ -2940,7 +2941,10 @@ const TextArea = () => {
                             const textarea = dom;
                             if (state.height)
                                 textarea.style.height = state.height;
-                            // No need to manually sync in onupdate since value attribute handles it
+                            // Trigger height recalculation when value changes programmatically
+                            if (state.hiddenDiv) {
+                                updateHeight(textarea, state.hiddenDiv);
+                            }
                         }, onfocus: () => {
                             state.active = true;
                         }, oninput: (e) => {
@@ -3100,9 +3104,6 @@ const InputField = (type, defaultClass = '') => () => {
             const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
             // const attributes = toAttrs(params);
             const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
-            const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
-                ? true
-                : false;
             // Special rendering for minmax range sliders
             if (type === 'range' && (attrs.minmax || attrs.valueDisplay)) {
                 return m(attrs.minmax ? DoubleRangeSlider : SingleRangeSlider, Object.assign(Object.assign({}, attrs), { state,
@@ -3123,12 +3124,15 @@ const InputField = (type, defaultClass = '') => () => {
             }
             else if (isNonInteractive) {
                 // Non-interactive components: prefer defaultValue, fallback to value
-                value = ((_c = (_b = attrs.defaultValue) !== null && _b !== void 0 ? _b : attrs.value) !== null && _c !== void 0 ? _c : (isNumeric ? 0 : ''));
+                value = ((_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value) !== null && _b !== void 0 ? _b : (isNumeric ? 0 : ''));
             }
             else {
                 // Interactive uncontrolled: use internal state
-                value = ((_e = (_d = state.internalValue) !== null && _d !== void 0 ? _d : attrs.defaultValue) !== null && _e !== void 0 ? _e : (isNumeric ? 0 : ''));
+                value = ((_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : (isNumeric ? 0 : ''));
             }
+            const isActive = state.active || ((_e = state.inputElement) === null || _e === void 0 ? void 0 : _e.value) || value || placeholder || type === 'color' || type === 'range'
+                ? true
+                : false;
             const rangeType = type === 'range' && !attrs.minmax;
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
@@ -5754,11 +5758,13 @@ const RadioButtons = () => {
 const Select = () => {
     const state = {
         id: '',
+        dropdownId: '',
         isOpen: false,
         focusedIndex: -1,
         inputRef: null,
         dropdownRef: null,
         internalSelectedIds: [],
+        isInsideModal: false,
     };
     const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
     const isSelected = (id, selectedIds) => {
@@ -5847,9 +5853,124 @@ const Select = () => {
             m.redraw();
         }
     };
+    const getPortalStyles = (inputRef) => {
+        if (!inputRef)
+            return {};
+        const rect = inputRef.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        return {
+            position: 'fixed',
+            top: `${rect.bottom}px`,
+            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
+        };
+    };
+    const renderDropdownContent = (attrs, selectedIds, multiple, placeholder) => [
+        placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
+        // 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
+            ? {}
+            : {
+                onclick: (e) => {
+                    e.stopPropagation();
+                    toggleOption(option.id, multiple, attrs);
+                },
+            })), [
+            option.img && m('img', { src: option.img, alt: option.label }),
+            m('span', [
+                multiple
+                    ? m('label', { for: option.id }, m('input', {
+                        id: option.id,
+                        type: 'checkbox',
+                        checked: selectedIds.includes(option.id),
+                        disabled: option.disabled ? true : undefined,
+                        onclick: (e) => {
+                            e.stopPropagation();
+                        },
+                    }), m('span', option.label))
+                    : m('span', option.label),
+            ].filter(Boolean)),
+        ])),
+        // Render grouped options
+        Object.entries(attrs.options
+            .filter((option) => option.group)
+            .reduce((groups, option) => {
+            const group = option.group;
+            if (!groups[group])
+                groups[group] = [];
+            groups[group].push(option);
+            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
+                ? {}
+                : {
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        toggleOption(option.id, multiple, attrs);
+                    },
+                })), [
+                option.img && m('img', { src: option.img, alt: option.label }),
+                m('span', [
+                    multiple
+                        ? m('label', { for: option.id }, m('input', {
+                            id: option.id,
+                            type: 'checkbox',
+                            checked: selectedIds.includes(option.id),
+                            disabled: option.disabled ? true : undefined,
+                            onclick: (e) => {
+                                e.stopPropagation();
+                            },
+                        }), m('span', option.label))
+                        : m('span', option.label),
+                ].filter(Boolean)),
+            ])),
+        ])
+            .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);
+        }
+        const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
+            tabindex: 0,
+            style: getPortalStyles(state.inputRef),
+            oncreate: ({ dom }) => {
+                state.dropdownRef = dom;
+            },
+            onremove: () => {
+                state.dropdownRef = null;
+            },
+        }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
+        m.render(portalElement, dropdownVnode);
+    };
     return {
         oninit: ({ attrs }) => {
             state.id = attrs.id || uniqueId();
+            state.dropdownId = `${state.id}-dropdown`;
             const controlled = isControlled(attrs);
             // Warn developer for improper controlled usage
             if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
@@ -5868,9 +5989,20 @@ const Select = () => {
             // 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 portaled dropdown if it exists
+            if (state.isInsideModal && state.dropdownRef) {
+                const portalElement = document.getElementById(state.dropdownId);
+                if (portalElement && portalElement.parentNode) {
+                    portalElement.parentNode.removeChild(portalElement);
+                }
+            }
         },
         view: ({ attrs }) => {
             var _a;
@@ -5879,20 +6011,13 @@ const Select = () => {
             // Get selected IDs from props or internal state
             let selectedIds;
             if (controlled) {
-                selectedIds = attrs.checkedId !== undefined
-                    ? Array.isArray(attrs.checkedId)
-                        ? attrs.checkedId
-                        : [attrs.checkedId]
-                    : [];
+                selectedIds =
+                    attrs.checkedId !== undefined ? (Array.isArray(attrs.checkedId) ? attrs.checkedId : [attrs.checkedId]) : [];
             }
             else if (disabled) {
                 // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
                 const fallbackId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : attrs.checkedId;
-                selectedIds = fallbackId !== undefined
-                    ? Array.isArray(fallbackId)
-                        ? fallbackId
-                        : [fallbackId]
-                    : [];
+                selectedIds = fallbackId !== undefined ? (Array.isArray(fallbackId) ? fallbackId : [fallbackId]) : [];
             }
             else {
                 // Interactive uncontrolled: use internal state
@@ -5901,6 +6026,10 @@ const Select = () => {
             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
+            if (state.isInsideModal) {
+                updatePortalDropdown(attrs, selectedIds, multiple, placeholder);
+            }
             return m('.input-field.select-space', {
                 className: finalClassName,
                 key,
@@ -5913,6 +6042,7 @@ const Select = () => {
                     tabindex: disabled ? -1 : 0,
                     'aria-expanded': state.isOpen ? 'true' : 'false',
                     'aria-haspopup': 'listbox',
+                    'aria-controls': state.dropdownId,
                     role: 'combobox',
                 }, [
                     m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
@@ -5929,8 +6059,8 @@ const Select = () => {
                             }
                         },
                     }),
-                    // Dropdown Menu
-                    state.isOpen &&
+                    // Dropdown Menu - render inline only when NOT inside modal
+                    state.isOpen && !state.isInsideModal &&
                         m('ul.dropdown-content.select-dropdown', {
                             tabindex: 0,
                             oncreate: ({ dom }) => {
@@ -5940,66 +6070,7 @@ const Select = () => {
                                 state.dropdownRef = null;
                             },
                             style: getDropdownStyles(state.inputRef, true, options),
-                        }, [
-                            placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
-                            // Render ungrouped options first
-                            options
-                                .filter((option) => !option.group)
-                                .map((option) => m('li', Object.assign({ key: option.id, class: option.disabled
-                                    ? 'disabled'
-                                    : state.focusedIndex === options.indexOf(option)
-                                        ? 'focused'
-                                        : '' }, (option.disabled
-                                ? {}
-                                : {
-                                    onclick: (e) => {
-                                        e.stopPropagation();
-                                        toggleOption(option.id, multiple, attrs);
-                                    },
-                                })), m('span', multiple
-                                ? m('label', { for: option.id }, m('input', {
-                                    id: option.id,
-                                    type: 'checkbox',
-                                    checked: selectedIds.includes(option.id),
-                                    disabled: option.disabled ? true : undefined,
-                                    onclick: (e) => {
-                                        e.stopPropagation();
-                                    },
-                                }), m('span', option.label))
-                                : option.label))),
-                            // Render grouped options
-                            Object.entries(options
-                                .filter((option) => option.group)
-                                .reduce((groups, option) => {
-                                const group = option.group;
-                                if (!groups[group])
-                                    groups[group] = [];
-                                groups[group].push(option);
-                                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 === options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
-                                    ? {}
-                                    : {
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                            toggleOption(option.id, multiple, attrs);
-                                        },
-                                    })), m('span', multiple
-                                    ? m('label', { for: option.id }, m('input', {
-                                        id: option.id,
-                                        type: 'checkbox',
-                                        checked: selectedIds.includes(option.id),
-                                        disabled: option.disabled ? true : undefined,
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                        },
-                                    }), m('span', option.label))
-                                    : option.label))),
-                            ])
-                                .reduce((acc, val) => acc.concat(val), []),
-                        ]),
+                        }, renderDropdownContent(attrs, selectedIds, multiple, placeholder)),
                     m(MaterialIcon, {
                         name: 'caret',
                         direction: 'down',

package/dist/index.umd.js CHANGED Viewed

@@ -2815,6 +2815,7 @@
             height: undefined,
             active: false,
             textarea: undefined,
+            hiddenDiv: undefined,
             internalValue: '',
         };
         const updateHeight = (textarea, hiddenDiv) => {
@@ -2911,13 +2912,13 @@
                             overflowWrap: 'break-word',
                         },
                         oncreate: ({ dom }) => {
-                            const hiddenDiv = dom;
+                            const hiddenDiv = state.hiddenDiv = dom;
                             if (state.textarea) {
                                 updateHeight(state.textarea, hiddenDiv);
                             }
                         },
                         onupdate: ({ dom }) => {
-                            const hiddenDiv = dom;
+                            const hiddenDiv = state.hiddenDiv = dom;
                             if (state.textarea) {
                                 updateHeight(state.textarea, hiddenDiv);
                             }
@@ -2942,7 +2943,10 @@
                                 const textarea = dom;
                                 if (state.height)
                                     textarea.style.height = state.height;
-                                // No need to manually sync in onupdate since value attribute handles it
+                                // Trigger height recalculation when value changes programmatically
+                                if (state.hiddenDiv) {
+                                    updateHeight(textarea, state.hiddenDiv);
+                                }
                             }, onfocus: () => {
                                 state.active = true;
                             }, oninput: (e) => {
@@ -3102,9 +3106,6 @@
                 const { className = 'col s12', dataError, dataSuccess, helperText, iconName, id = state.id, placeholder, isMandatory, label, maxLength, newRow, oninput, onchange, onkeydown, onkeypress, onkeyup, style, validate, canClear } = attrs, params = __rest(attrs, ["className", "dataError", "dataSuccess", "helperText", "iconName", "id", "placeholder", "isMandatory", "label", "maxLength", "newRow", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "style", "validate", "canClear"]);
                 // const attributes = toAttrs(params);
                 const cn = [newRow ? 'clear' : '', defaultClass, className].filter(Boolean).join(' ').trim() || undefined;
-                const isActive = state.active || ((_a = state.inputElement) === null || _a === void 0 ? void 0 : _a.value) || placeholder || type === 'color' || type === 'range'
-                    ? true
-                    : false;
                 // Special rendering for minmax range sliders
                 if (type === 'range' && (attrs.minmax || attrs.valueDisplay)) {
                     return m(attrs.minmax ? DoubleRangeSlider : SingleRangeSlider, Object.assign(Object.assign({}, attrs), { state,
@@ -3125,12 +3126,15 @@
                 }
                 else if (isNonInteractive) {
                     // Non-interactive components: prefer defaultValue, fallback to value
-                    value = ((_c = (_b = attrs.defaultValue) !== null && _b !== void 0 ? _b : attrs.value) !== null && _c !== void 0 ? _c : (isNumeric ? 0 : ''));
+                    value = ((_b = (_a = attrs.defaultValue) !== null && _a !== void 0 ? _a : attrs.value) !== null && _b !== void 0 ? _b : (isNumeric ? 0 : ''));
                 }
                 else {
                     // Interactive uncontrolled: use internal state
-                    value = ((_e = (_d = state.internalValue) !== null && _d !== void 0 ? _d : attrs.defaultValue) !== null && _e !== void 0 ? _e : (isNumeric ? 0 : ''));
+                    value = ((_d = (_c = state.internalValue) !== null && _c !== void 0 ? _c : attrs.defaultValue) !== null && _d !== void 0 ? _d : (isNumeric ? 0 : ''));
                 }
+                const isActive = state.active || ((_e = state.inputElement) === null || _e === void 0 ? void 0 : _e.value) || value || placeholder || type === 'color' || type === 'range'
+                    ? true
+                    : false;
                 const rangeType = type === 'range' && !attrs.minmax;
                 return m('.input-field', { className: cn, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
@@ -5756,11 +5760,13 @@
     const Select = () => {
         const state = {
             id: '',
+            dropdownId: '',
             isOpen: false,
             focusedIndex: -1,
             inputRef: null,
             dropdownRef: null,
             internalSelectedIds: [],
+            isInsideModal: false,
         };
         const isControlled = (attrs) => attrs.checkedId !== undefined && attrs.onchange !== undefined;
         const isSelected = (id, selectedIds) => {
@@ -5849,9 +5855,124 @@
                 m.redraw();
             }
         };
+        const getPortalStyles = (inputRef) => {
+            if (!inputRef)
+                return {};
+            const rect = inputRef.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            return {
+                position: 'fixed',
+                top: `${rect.bottom}px`,
+                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
+            };
+        };
+        const renderDropdownContent = (attrs, selectedIds, multiple, placeholder) => [
+            placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
+            // 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
+                ? {}
+                : {
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        toggleOption(option.id, multiple, attrs);
+                    },
+                })), [
+                option.img && m('img', { src: option.img, alt: option.label }),
+                m('span', [
+                    multiple
+                        ? m('label', { for: option.id }, m('input', {
+                            id: option.id,
+                            type: 'checkbox',
+                            checked: selectedIds.includes(option.id),
+                            disabled: option.disabled ? true : undefined,
+                            onclick: (e) => {
+                                e.stopPropagation();
+                            },
+                        }), m('span', option.label))
+                        : m('span', option.label),
+                ].filter(Boolean)),
+            ])),
+            // Render grouped options
+            Object.entries(attrs.options
+                .filter((option) => option.group)
+                .reduce((groups, option) => {
+                const group = option.group;
+                if (!groups[group])
+                    groups[group] = [];
+                groups[group].push(option);
+                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
+                    ? {}
+                    : {
+                        onclick: (e) => {
+                            e.stopPropagation();
+                            toggleOption(option.id, multiple, attrs);
+                        },
+                    })), [
+                    option.img && m('img', { src: option.img, alt: option.label }),
+                    m('span', [
+                        multiple
+                            ? m('label', { for: option.id }, m('input', {
+                                id: option.id,
+                                type: 'checkbox',
+                                checked: selectedIds.includes(option.id),
+                                disabled: option.disabled ? true : undefined,
+                                onclick: (e) => {
+                                    e.stopPropagation();
+                                },
+                            }), m('span', option.label))
+                            : m('span', option.label),
+                    ].filter(Boolean)),
+                ])),
+            ])
+                .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);
+            }
+            const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
+                tabindex: 0,
+                style: getPortalStyles(state.inputRef),
+                oncreate: ({ dom }) => {
+                    state.dropdownRef = dom;
+                },
+                onremove: () => {
+                    state.dropdownRef = null;
+                },
+            }, renderDropdownContent(attrs, selectedIds, multiple, placeholder));
+            m.render(portalElement, dropdownVnode);
+        };
         return {
             oninit: ({ attrs }) => {
                 state.id = attrs.id || uniqueId();
+                state.dropdownId = `${state.id}-dropdown`;
                 const controlled = isControlled(attrs);
                 // Warn developer for improper controlled usage
                 if (attrs.checkedId !== undefined && !controlled && !attrs.disabled) {
@@ -5870,9 +5991,20 @@
                 // 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 portaled dropdown if it exists
+                if (state.isInsideModal && state.dropdownRef) {
+                    const portalElement = document.getElementById(state.dropdownId);
+                    if (portalElement && portalElement.parentNode) {
+                        portalElement.parentNode.removeChild(portalElement);
+                    }
+                }
             },
             view: ({ attrs }) => {
                 var _a;
@@ -5881,20 +6013,13 @@
                 // Get selected IDs from props or internal state
                 let selectedIds;
                 if (controlled) {
-                    selectedIds = attrs.checkedId !== undefined
-                        ? Array.isArray(attrs.checkedId)
-                            ? attrs.checkedId
-                            : [attrs.checkedId]
-                        : [];
+                    selectedIds =
+                        attrs.checkedId !== undefined ? (Array.isArray(attrs.checkedId) ? attrs.checkedId : [attrs.checkedId]) : [];
                 }
                 else if (disabled) {
                     // Non-interactive components: prefer defaultCheckedId, fallback to checkedId
                     const fallbackId = (_a = attrs.defaultCheckedId) !== null && _a !== void 0 ? _a : attrs.checkedId;
-                    selectedIds = fallbackId !== undefined
-                        ? Array.isArray(fallbackId)
-                            ? fallbackId
-                            : [fallbackId]
-                        : [];
+                    selectedIds = fallbackId !== undefined ? (Array.isArray(fallbackId) ? fallbackId : [fallbackId]) : [];
                 }
                 else {
                     // Interactive uncontrolled: use internal state
@@ -5903,6 +6028,10 @@
                 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
+                if (state.isInsideModal) {
+                    updatePortalDropdown(attrs, selectedIds, multiple, placeholder);
+                }
                 return m('.input-field.select-space', {
                     className: finalClassName,
                     key,
@@ -5915,6 +6044,7 @@
                         tabindex: disabled ? -1 : 0,
                         'aria-expanded': state.isOpen ? 'true' : 'false',
                         'aria-haspopup': 'listbox',
+                        'aria-controls': state.dropdownId,
                         role: 'combobox',
                     }, [
                         m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
@@ -5931,8 +6061,8 @@
                                 }
                             },
                         }),
-                        // Dropdown Menu
-                        state.isOpen &&
+                        // Dropdown Menu - render inline only when NOT inside modal
+                        state.isOpen && !state.isInsideModal &&
                             m('ul.dropdown-content.select-dropdown', {
                                 tabindex: 0,
                                 oncreate: ({ dom }) => {
@@ -5942,66 +6072,7 @@
                                     state.dropdownRef = null;
                                 },
                                 style: getDropdownStyles(state.inputRef, true, options),
-                            }, [
-                                placeholder && m('li.disabled', { tabindex: 0 }, m('span', placeholder)),
-                                // Render ungrouped options first
-                                options
-                                    .filter((option) => !option.group)
-                                    .map((option) => m('li', Object.assign({ key: option.id, class: option.disabled
-                                        ? 'disabled'
-                                        : state.focusedIndex === options.indexOf(option)
-                                            ? 'focused'
-                                            : '' }, (option.disabled
-                                    ? {}
-                                    : {
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                            toggleOption(option.id, multiple, attrs);
-                                        },
-                                    })), m('span', multiple
-                                    ? m('label', { for: option.id }, m('input', {
-                                        id: option.id,
-                                        type: 'checkbox',
-                                        checked: selectedIds.includes(option.id),
-                                        disabled: option.disabled ? true : undefined,
-                                        onclick: (e) => {
-                                            e.stopPropagation();
-                                        },
-                                    }), m('span', option.label))
-                                    : option.label))),
-                                // Render grouped options
-                                Object.entries(options
-                                    .filter((option) => option.group)
-                                    .reduce((groups, option) => {
-                                    const group = option.group;
-                                    if (!groups[group])
-                                        groups[group] = [];
-                                    groups[group].push(option);
-                                    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 === options.indexOf(option) ? ' focused' : ''}` }, (option.disabled
-                                        ? {}
-                                        : {
-                                            onclick: (e) => {
-                                                e.stopPropagation();
-                                                toggleOption(option.id, multiple, attrs);
-                                            },
-                                        })), m('span', multiple
-                                        ? m('label', { for: option.id }, m('input', {
-                                            id: option.id,
-                                            type: 'checkbox',
-                                            checked: selectedIds.includes(option.id),
-                                            disabled: option.disabled ? true : undefined,
-                                            onclick: (e) => {
-                                                e.stopPropagation();
-                                            },
-                                        }), m('span', option.label))
-                                        : option.label))),
-                                ])
-                                    .reduce((acc, val) => acc.concat(val), []),
-                            ]),
+                            }, renderDropdownContent(attrs, selectedIds, multiple, placeholder)),
                         m(MaterialIcon, {
                             name: 'caret',
                             direction: 'down',

package/package.json CHANGED Viewed

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