mithril-materialized 3.5.0 → 3.5.1

package/dist/index.umd.js

@@ -3300,9 +3300,11 @@
                     ? true
                     : false;
                 const rangeType = type === 'range' && !attrs.minmax;
+                // Only add validate class if input is interactive and validation is needed
+                const shouldValidate = !isNonInteractive && (validate || type === 'email' || type === 'url' || isNumeric);
                 return m('.input-field', { className: cn, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                    m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id,
+                    m('input', Object.assign(Object.assign({ class: shouldValidate ? 'validate' : undefined }, params), { type, tabindex: 0, id,
                         placeholder, value: controlled ? value : undefined, class: type === 'range' && attrs.vertical ? 'range-slider vertical' : undefined, style: type === 'range' && attrs.vertical
                             ? {
                                 height: attrs.height || '200px',
@@ -3383,6 +3385,17 @@
                             state.active = false;
                             const target = e.target;
                             state.hasInteracted = true;
+                            // Skip validation for readonly/disabled inputs
+                            if (attrs.readonly || attrs.disabled) {
+                                // Call original onblur if provided
+                                if (attrs.onblur) {
+                                    attrs.onblur(e);
+                                }
+                                if (onchange && state.inputElement) {
+                                    onchange(getValue(state.inputElement));
+                                }
+                                return;
+                            }
                             if (target && validate) {
                                 const value = getValue(target);
                                 // Only validate if user has entered some text

package/package.json

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

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

@@ -76,32 +76,32 @@ textarea.materialize-textarea {
   }
 
   // Valid Input Style
-  &.valid,
-  &:focus.valid {
+  &.valid:not([readonly]):not([disabled]),
+  &:focus.valid:not([readonly]):not([disabled]) {
     @extend %valid-input-style !optional;
   }
 
   // Custom Success Message
-  &.valid ~ .helper-text:after,
-  &:focus.valid ~ .helper-text:after {
+  &.valid:not([readonly]):not([disabled]) ~ .helper-text:after,
+  &:focus.valid:not([readonly]):not([disabled]) ~ .helper-text:after {
     @extend %custom-success-message !optional;
   }
-  &:focus.valid ~ label {
+  &:focus.valid:not([readonly]):not([disabled]) ~ label {
     color: variables.$input-success-color;
   }
 
   // Invalid Input Style
-  &.invalid,
-  &:focus.invalid {
+  &.invalid:not([readonly]):not([disabled]),
+  &:focus.invalid:not([readonly]):not([disabled]) {
     @extend %invalid-input-style !optional;
   }
 
   // Custom Error message
-  &.invalid ~ .helper-text:after,
-  &:focus.invalid ~ .helper-text:after {
+  &.invalid:not([readonly]):not([disabled]) ~ .helper-text:after,
+  &:focus.invalid:not([readonly]):not([disabled]) ~ .helper-text:after {
     @extend %custom-error-message !optional;
   }
-  &:focus.invalid ~ label {
+  &:focus.invalid:not([readonly]):not([disabled]) ~ label {
     color: variables.$input-error-color;
   }