mithril-materialized 3.2.0 → 3.2.2

package/dist/index.umd.js

@@ -2793,10 +2793,6 @@
                 return m('span.character-counter', {
                     style: {
                         color: isOverLimit ? '#F44336' : '#9e9e9e',
-                        fontSize: '12px',
-                        display: 'block',
-                        textAlign: 'right',
-                        marginTop: '8px',
                     },
                 }, `${currentLength}/${maxLength}`);
             },
@@ -2813,10 +2809,51 @@
             textarea: undefined,
             internalValue: '',
         };
-        const updateHeight = (textarea) => {
-            textarea.style.height = 'auto';
-            const newHeight = textarea.scrollHeight + 'px';
-            state.height = textarea.value.length === 0 ? undefined : newHeight;
+        const updateHeight = (textarea, hiddenDiv) => {
+            if (!textarea || !hiddenDiv)
+                return;
+            // Copy font properties from textarea to hidden div
+            const computedStyle = window.getComputedStyle(textarea);
+            hiddenDiv.style.fontFamily = computedStyle.fontFamily;
+            hiddenDiv.style.fontSize = computedStyle.fontSize;
+            hiddenDiv.style.lineHeight = computedStyle.lineHeight;
+            // Copy padding from textarea (important for accurate measurement)
+            hiddenDiv.style.paddingTop = computedStyle.paddingTop;
+            hiddenDiv.style.paddingRight = computedStyle.paddingRight;
+            hiddenDiv.style.paddingBottom = computedStyle.paddingBottom;
+            hiddenDiv.style.paddingLeft = computedStyle.paddingLeft;
+            // Handle text wrapping
+            if (textarea.getAttribute('wrap') === 'off') {
+                hiddenDiv.style.overflowWrap = 'normal';
+                hiddenDiv.style.whiteSpace = 'pre';
+            }
+            else {
+                hiddenDiv.style.overflowWrap = 'break-word';
+                hiddenDiv.style.whiteSpace = 'pre-wrap';
+            }
+            // Set content with extra newline for measurement
+            hiddenDiv.textContent = textarea.value + '\n';
+            const content = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
+            hiddenDiv.innerHTML = content;
+            // Set width to match textarea
+            if (textarea.offsetWidth > 0) {
+                hiddenDiv.style.width = textarea.offsetWidth + 'px';
+            }
+            else {
+                hiddenDiv.style.width = window.innerWidth / 2 + 'px';
+            }
+            // Get the original/natural height of the textarea
+            const originalHeight = textarea.offsetHeight;
+            const measuredHeight = hiddenDiv.offsetHeight;
+            // Key logic: Only set custom height when content requires MORE space than original height
+            // This matches the Materialize CSS reference behavior
+            if (originalHeight <= measuredHeight) {
+                state.height = measuredHeight + 'px';
+            }
+            else {
+                // Single line content or content that fits in original height - let CSS handle it
+                state.height = undefined;
+            }
         };
         const isControlled = (attrs) => attrs.value !== undefined && attrs.oninput !== undefined;
         return {
@@ -2832,92 +2869,117 @@
                 const { className = 'col s12', helperText, iconName, id = state.id, value, placeholder, isMandatory, label, maxLength, oninput, onchange, onkeydown, onkeypress, onkeyup, onblur, style } = attrs, params = __rest(attrs, ["className", "helperText", "iconName", "id", "value", "placeholder", "isMandatory", "label", "maxLength", "oninput", "onchange", "onkeydown", "onkeypress", "onkeyup", "onblur", "style"]);
                 const controlled = isControlled(attrs);
                 const currentValue = controlled ? value || '' : state.internalValue;
-                return m('.input-field', { className, style }, [
-                    iconName ? m('i.material-icons.prefix', iconName) : '',
-                    m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, value: controlled ? currentValue : undefined, style: {
-                            height: state.height,
-                        }, oncreate: ({ dom }) => {
-                            const textarea = (state.textarea = dom);
-                            // For uncontrolled mode, set initial value only
-                            if (!controlled && attrs.defaultValue !== undefined) {
-                                textarea.value = String(attrs.defaultValue);
-                            }
-                            updateHeight(textarea);
-                            // Update character count state for counter component
-                            if (maxLength) {
-                                state.currentLength = textarea.value.length;
-                                m.redraw();
-                            }
-                        }, onupdate: ({ dom }) => {
-                            const textarea = dom;
-                            if (state.height)
-                                textarea.style.height = state.height;
-                            // No need to manually sync in onupdate since value attribute handles it
-                        }, onfocus: () => {
-                            state.active = true;
-                        }, oninput: (e) => {
-                            state.active = true;
-                            state.hasInteracted = false;
-                            const target = e.target;
-                            // Update height for auto-resize
-                            updateHeight(target);
-                            // Update character count
-                            if (maxLength) {
-                                state.currentLength = target.value.length;
-                                state.hasInteracted = target.value.length > 0;
-                            }
-                            // Update internal state for uncontrolled mode
-                            if (!controlled) {
-                                state.internalValue = target.value;
-                            }
-                            // Call oninput handler
-                            if (oninput) {
-                                oninput(target.value);
-                            }
-                        }, onblur: (e) => {
-                            state.active = false;
-                            // const target = e.target as HTMLTextAreaElement;
-                            state.hasInteracted = true;
-                            // Call original onblur if provided
-                            if (onblur) {
-                                onblur(e);
-                            }
-                            if (onchange && state.textarea) {
-                                onchange(state.textarea.value);
-                            }
-                        }, onkeyup: onkeyup
-                            ? (ev) => {
-                                onkeyup(ev, ev.target.value);
-                            }
-                            : undefined, onkeydown: onkeydown
-                            ? (ev) => {
-                                onkeydown(ev, ev.target.value);
+                return [
+                    // Hidden div for height measurement - positioned outside the input-field
+                    m('.hiddendiv', {
+                        style: {
+                            visibility: 'hidden',
+                            position: 'absolute',
+                            top: '0',
+                            left: '0',
+                            zIndex: '-1',
+                            whiteSpace: 'pre-wrap',
+                            wordWrap: 'break-word',
+                            overflowWrap: 'break-word',
+                        },
+                        oncreate: ({ dom }) => {
+                            const hiddenDiv = dom;
+                            if (state.textarea) {
+                                updateHeight(state.textarea, hiddenDiv);
                             }
-                            : undefined, onkeypress: onkeypress
-                            ? (ev) => {
-                                onkeypress(ev, ev.target.value);
+                        },
+                        onupdate: ({ dom }) => {
+                            const hiddenDiv = dom;
+                            if (state.textarea) {
+                                updateHeight(state.textarea, hiddenDiv);
                             }
-                            : undefined })),
-                    m(Label, {
-                        label,
-                        id,
-                        isMandatory,
-                        isActive: currentValue || placeholder || state.active,
-                        initialValue: currentValue !== '',
-                    }),
-                    m(HelperText, {
-                        helperText,
-                        dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
-                        dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                        },
                     }),
-                    maxLength
-                        ? m(CharacterCounter, {
-                            currentLength: state.currentLength,
-                            maxLength,
-                            show: state.currentLength > 0,
-                        })
-                        : undefined,
-                ]);
+                    m('.input-field', { className, style }, [
+                        iconName ? m('i.material-icons.prefix', iconName) : '',
+                        m('textarea.materialize-textarea', Object.assign(Object.assign({}, params), { id, tabindex: 0, value: controlled ? currentValue : undefined, style: {
+                                height: state.height,
+                            }, oncreate: ({ dom }) => {
+                                const textarea = (state.textarea = dom);
+                                // For uncontrolled mode, set initial value only
+                                if (!controlled && attrs.defaultValue !== undefined) {
+                                    textarea.value = String(attrs.defaultValue);
+                                }
+                                // Height will be calculated by hidden div
+                                // Update character count state for counter component
+                                if (maxLength) {
+                                    state.currentLength = textarea.value.length;
+                                }
+                            }, onupdate: ({ dom }) => {
+                                const textarea = dom;
+                                if (state.height)
+                                    textarea.style.height = state.height;
+                                // No need to manually sync in onupdate since value attribute handles it
+                            }, onfocus: () => {
+                                state.active = true;
+                            }, oninput: (e) => {
+                                state.active = true;
+                                state.hasInteracted = false;
+                                const target = e.target;
+                                // Height will be recalculated by hidden div on next update
+                                // Update character count
+                                if (maxLength) {
+                                    state.currentLength = target.value.length;
+                                    state.hasInteracted = target.value.length > 0;
+                                }
+                                // Update internal state for uncontrolled mode
+                                if (!controlled) {
+                                    state.internalValue = target.value;
+                                }
+                                // Call oninput handler
+                                if (oninput) {
+                                    oninput(target.value);
+                                }
+                            }, onblur: (e) => {
+                                state.active = false;
+                                // const target = e.target as HTMLTextAreaElement;
+                                state.hasInteracted = true;
+                                // Call original onblur if provided
+                                if (onblur) {
+                                    onblur(e);
+                                }
+                                if (onchange && state.textarea) {
+                                    onchange(state.textarea.value);
+                                }
+                            }, onkeyup: onkeyup
+                                ? (ev) => {
+                                    onkeyup(ev, ev.target.value);
+                                }
+                                : undefined, onkeydown: onkeydown
+                                ? (ev) => {
+                                    onkeydown(ev, ev.target.value);
+                                }
+                                : undefined, onkeypress: onkeypress
+                                ? (ev) => {
+                                    onkeypress(ev, ev.target.value);
+                                }
+                                : undefined })),
+                        m(Label, {
+                            label,
+                            id,
+                            isMandatory,
+                            isActive: currentValue || placeholder || state.active,
+                            initialValue: currentValue !== '',
+                        }),
+                        m(HelperText, {
+                            helperText,
+                            dataError: state.hasInteracted && attrs.dataError ? attrs.dataError : undefined,
+                            dataSuccess: state.hasInteracted && attrs.dataSuccess ? attrs.dataSuccess : undefined,
+                        }),
+                        maxLength
+                            ? m(CharacterCounter, {
+                                currentLength: state.currentLength,
+                                maxLength,
+                                show: state.currentLength > 0,
+                            })
+                            : undefined,
+                    ]),
+                ];
             },
         };
     };
@@ -3089,7 +3151,9 @@
                                     state.isValid = true;
                                 }
                             }
-                            else if ((type === 'email' || type === 'url') && target.classList.contains('invalid') && target.value.length > 0) {
+                            else if ((type === 'email' || type === 'url') &&
+                                target.classList.contains('invalid') &&
+                                target.value.length > 0) {
                                 // Clear native validation errors if user is typing and input becomes valid
                                 if (target.validity.valid) {
                                     target.classList.remove('invalid');
@@ -4002,7 +4066,7 @@
                 m.redraw();
             }
         };
-        const handleKeyDown = (e, items, onchange) => {
+        const handleKeyDown = (e, items) => {
             const availableItems = items.filter((item) => !item.divider && !item.disabled);
             switch (e.key) {
                 case 'ArrowDown':
@@ -4012,15 +4076,15 @@
                         state.focusedIndex = availableItems.length > 0 ? 0 : -1;
                     }
                     else {
-                        state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
+                        state.focusedIndex = (state.focusedIndex + 1) % availableItems.length;
                     }
-                    break;
+                    return undefined;
                 case 'ArrowUp':
                     e.preventDefault();
                     if (state.isOpen) {
-                        state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
+                        state.focusedIndex = state.focusedIndex <= 0 ? availableItems.length - 1 : state.focusedIndex - 1;
                     }
-                    break;
+                    return undefined;
                 case 'Enter':
                 case ' ':
                     e.preventDefault();
@@ -4029,18 +4093,20 @@
                         const value = (selectedItem.id || selectedItem.label);
                         state.isOpen = false;
                         state.focusedIndex = -1;
-                        return value; // Return value to be handled in view
+                        return value;
                     }
                     else if (!state.isOpen) {
                         state.isOpen = true;
                         state.focusedIndex = availableItems.length > 0 ? 0 : -1;
                     }
-                    break;
+                    return undefined;
                 case 'Escape':
                     e.preventDefault();
                     state.isOpen = false;
                     state.focusedIndex = -1;
-                    break;
+                    return undefined;
+                default:
+                    return undefined;
             }
         };
         return {
@@ -4073,7 +4139,9 @@
                     }
                 };
                 const selectedItem = currentCheckedId
-                    ? items.filter((i) => (i.id ? i.id === currentCheckedId : i.label === currentCheckedId)).shift()
+                    ? items
+                        .filter((i) => (i.id ? i.id === currentCheckedId : i.label === currentCheckedId))
+                        .shift()
                     : undefined;
                 const title = selectedItem ? selectedItem.label : label || 'Select';
                 const availableItems = items.filter((item) => !item.divider && !item.disabled);
@@ -4081,12 +4149,14 @@
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
                     m(HelperText, { helperText }),
                     m('.select-wrapper', {
-                        onkeydown: disabled ? undefined : (e) => {
-                            const selectedValue = handleKeyDown(e, items);
-                            if (selectedValue) {
-                                handleSelection(selectedValue);
-                            }
-                        },
+                        onkeydown: disabled
+                            ? undefined
+                            : (e) => {
+                                const selectedValue = handleKeyDown(e, items);
+                                if (selectedValue) {
+                                    handleSelection(selectedValue);
+                                }
+                            },
                         tabindex: disabled ? -1 : 0,
                         'aria-expanded': state.isOpen ? 'true' : 'false',
                         'aria-haspopup': 'listbox',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-materialized",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "description": "A materialize library for mithril.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -86,16 +86,16 @@
     "concurrently": "^9.2.1",
     "express": "^5.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.1.1",
-    "jest-environment-jsdom": "^30.1.1",
+    "jest": "^30.1.2",
+    "jest-environment-jsdom": "^30.1.2",
     "js-yaml": "^4.1.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.49.0",
+    "rollup": "^4.50.0",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.91.0",
     "ts-jest": "^29.4.1",
     "tslib": "^2.8.1",
-    "typedoc": "^0.28.11",
+    "typedoc": "^0.28.12",
     "typescript": "^5.9.2"
   }
 }

package/sass/components/forms/_input-fields.scss

@@ -380,6 +380,9 @@ textarea {
 /* Character Counter */
 .character-counter {
   min-height: 18px;
+  font-size: 12px;
+  display: block;
+  text-align: right;
 }
 
 /* Input Clear Button */