saasufy-components 3.32.0 → 3.34.0

package/README.md

@@ -509,6 +509,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `accept`: This attribute should only be used if the `type` is set to `file`; it serves to constrain the types of files which can be selected by the user.
 - `input-id`: Can be used to set an `id` attribute on the inner `input` element.
 - `input-props`: Can be used to set additional attributes on the inner `input` element. Must be in the format `attr1=value1,attr2=value2`.
+- `ignore-invalid-selection`: Can be used with a `model-input` component of type `select` to prevent the `error` class from being added if the selected value is not among the available options.
 
 ### model-text
 

package/model-input.js

@@ -42,7 +42,8 @@ class ModelInput extends SocketConsumer {
       'autocapitalize',
       'autocorrect',
       'input-id',
-      'input-props'
+      'input-props',
+      'ignore-invalid-selection'
     ];
   }
 
@@ -266,7 +267,12 @@ class ModelInput extends SocketConsumer {
   }
 
   verifyValue(fieldValue, optionList, inputElement, messageContainerElement) {
-    if (optionList && fieldValue != null && !optionList.includes(fieldValue)) {
+    if (
+      optionList &&
+      fieldValue != null &&
+      !optionList.includes(fieldValue) &&
+      !this.hasAttribute('ignore-invalid-selection')
+    ) {
       inputElement.classList.add('error');
       inputElement.classList.remove('success');
       if (messageContainerElement) {
@@ -323,6 +329,7 @@ class ModelInput extends SocketConsumer {
     let debounce = debouncer();
 
     let onInputChange = (event) => {
+      inputElement.classList.remove(successStyleClass);
       debounce(async () => {
         if (event.target.value === String(model.value[fieldName] || '')) return;
 
@@ -381,6 +388,7 @@ class ModelInput extends SocketConsumer {
     let onInputKeyUp;
     if (inputElement.type !== 'checkbox' && inputElement.type !== 'select') {
       onInputKeyUp = async (event) => {
+        inputElement.classList.remove(successStyleClass);
         debounce(async () => {
           if (event.target.value === String(model.value[fieldName] || '')) return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.32.0",
+  "version": "3.34.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {