diff --git a/.changeset/gorgeous-poets-explain.md b/.changeset/gorgeous-poets-explain.md
new file mode 100644
index 000000000..5e44272d2
--- /dev/null
+++ b/.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.
diff --git a/packages/form-core/src/validate/ValidateMixin.js b/packages/form-core/src/validate/ValidateMixin.js
index 9927202e8..f33c67268 100644
--- a/packages/form-core/src/validate/ValidateMixin.js
+++ b/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();
}
diff --git a/packages/form-integrations/docs/35-system-interaction-states.md b/packages/form-integrations/docs/35-system-interaction-states.md
index 557b871db..f7f54de3d 100644
--- a/packages/form-integrations/docs/35-system-interaction-states.md
+++ b/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...
- // properties on InteractionStateMixin we want to check conditions for
+ // 1. Initialize variables
+ // 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
- 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 })];
+
+ // 2. Create a validator
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...
- // Here we will store a reference to the Field element that overrides the default condition
- // (function `showErrorCondition`) for triggering validation feedback of `.validators`
+ // 3. Create field that applies the validator and store the node reference
const fieldElement = renderLitAsNode(html`
{
help-text="Change feedback condition"
.modelValue="${'notodd'}"
.validators="${[new OddValidator()]}"
- >
-
-
+ >
`);
- fieldElement._showFeedbackConditionFor = type => {
- return conditions.every(condition => {
- /**
- * This here shows bug for focused state.
- * Focused is set to true AFTER we already evaluate feedback conditions
- * Bug report: https://github.com/ing-bank/lion/issues/455
- */
- // setTimeout(() => console.log(fieldElement[condition])); //
- return fieldElement[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.
+ const fetchConditionsAndReevaluate = ({ currentTarget: { modelValue } }) => {
+ fieldElement._showFeedbackConditionFor = type => {
+ return modelValue.every(condition => fieldElement[condition]);
+ };
+ fieldElement.validate();
};
- 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`