fix(form-core): add missing interaction states for feedback conditions

.changeset/gorgeous-poets-explain.md

@@ -0,0 +1,6 @@
+---
+'@lion/form-core': patch
+'@lion/form-integrations': patch
+---
+
+Add missing interaction states that could act as feedback conditions. Fix the interactive demo that showcases dynamic feedback conditions.

packages/form-core/src/validate/ValidateMixin.js

@@ -192,7 +192,17 @@ export const ValidateMixinImplementation = superclass =>
         this.validate({ clearCurrentResult: true });
       }
 
-      if (['touched', 'dirty', 'prefilled', 'submitted', 'hasFeedbackFor'].includes(name)) {
+      if (
+        [
+          'touched',
+          'dirty',
+          'prefilled',
+          'focused',
+          'submitted',
+          'hasFeedbackFor',
+          'filled',
+        ].includes(name)
+      ) {
         this._updateShouldShowFeedbackFor();
       }
 

packages/form-integrations/docs/35-system-interaction-states.md

@@ -93,15 +93,11 @@ In the following example we will demonstrate this with interaction states, the m
 
 ```js preview-story
 export const feedbackCondition = () => {
-  // 1. Initialize variables...
+  // 1. Initialize variables
-  // properties on InteractionStateMixin we want to check conditions for
+  // properties we want to check conditions for
   const props = ['touched', 'dirty', 'prefilled', 'focused', 'filled', 'submitted'];
-  // Here we will store the conditions (trigger for validation feedback)
+
-  // provided via the UI of the demo
+  // 2. Create a validator
-  let conditions = [];
-  // 2. Create a validator...
-  // Define a demo validator that should only be visible on an odd amount of characters
-  // const OddValidator = [modelValue => ({ odd: modelValue.length % 2 !== 0 })];
   class OddValidator extends Validator {
     static get validatorName() {
       return 'OddValidator';
@@ -118,9 +114,7 @@ export const feedbackCondition = () => {
       return 'Add or remove one character';
     }
   }
-  // 3. Create field overriding .showErrorCondition...
+  // 3. Create field that applies the validator and store the node reference
-  // Here we will store a reference to the Field element that overrides the default condition
-  // (function `showErrorCondition`) for triggering validation feedback of `.validators`
   const fieldElement = renderLitAsNode(html`
     <lion-input
       name="interactionField"
@@ -128,33 +122,18 @@ export const feedbackCondition = () => {
       help-text="Change feedback condition"
       .modelValue="${'notodd'}"
       .validators="${[new OddValidator()]}"
-    >
+    ></lion-input>
-      <input slot="input" />
-    </lion-input>
   `);
-  fieldElement._showFeedbackConditionFor = type => {
+
-    return conditions.every(condition => {
+  // 4. When checkboxes change, set the showFeedbackConditionFor method to a new method that checks
-      /**
+  // whether every condition that is checked, is true on the field. Otherwise, don't show the feedback.
-       * This here shows bug for focused state.
+  const fetchConditionsAndReevaluate = ({ currentTarget: { modelValue } }) => {
-       * Focused is set to true AFTER we already evaluate feedback conditions
+    fieldElement._showFeedbackConditionFor = type => {
-       * Bug report: https://github.com/ing-bank/lion/issues/455
+      return modelValue.every(condition => fieldElement[condition]);
-       */
+    };
-      // setTimeout(() => console.log(fieldElement[condition])); //
+    fieldElement.validate();
-      return fieldElement[condition];
-    });
   };
-  function fetchConditionsAndReevaluate({ currentTarget: { modelValue } }) {
+
-    if (!modelValue['props[]']) {
-      return;
-    }
-    // Create props list like: ['touched', 'submitted']
-    conditions = modelValue['props[]'].filter(p => p.checked).map(p => p.value);
-    // Reevaluate
-    fieldElement.validate();
-  }
-  fieldElement.addEventListener('focus', () => {
-    fieldElement.validate();
-  });
   return html`
     <lion-form>
       <form>