fix(input-amount-dropdown): update _isEmpty method to only check amount property for emptiness

fix(input-amount-dropdown): update _isEmpty method to only check amount property for emptiness

Co-authored-by: Radu Adascalitei <adascalitei.radu@live.com>

Author: tlouisse

.changeset/neat-mangos-like.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+fix: [input-amount-dropdown] lion input amount dropdown not working with validators due to \_isEmpty implementation

packages/ui/components/input-amount-dropdown/src/LionInputAmountDropdown.js

@@ -398,14 +398,16 @@ export class LionInputAmountDropdown extends LionInputAmount {
 
   /**
    * Used for Required validation and computation of interaction states.
-   * We need to override this, because we prefill the input with the currency code, but for proper UX,
-   * we don't consider this as having interaction state `prefilled`
-   * @param {string} modelValue
+   * We only consider the amount part for emptiness checks.
+   * Missing, null, empty-string or NaN amount is considered empty.
    * @return {boolean}
    * @protected
    */
   _isEmpty(modelValue = this.modelValue) {
-    return super._isEmpty(modelValue) || this.currency === this.__initializedCurrencyCode;
+    const isNumberValue =
+      typeof modelValue?.amount === 'number' &&
+      (modelValue?.amount === 0 || Number.isNaN(modelValue?.amount));
+    return !modelValue?.amount && !isNumberValue;
   }
 
   /**

packages/ui/components/input-amount-dropdown/test-suites/LionInputAmountDropdown.suite.js

@@ -317,5 +317,29 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
       // @ts-ignore
       expect(el._isEmpty(), 'empty').to.be.true;
     });
+
+    it('only checks modelValue.amount', async () => {
+      const el = await fixture(html` <${tag}></${tag}> `);
+
+      el.modelValue = { currency: 'GBP', amount: 1 };
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'filled amount').to.be.false;
+
+      el.modelValue = { currency: 'EUR', amount: '' };
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'empty amount').to.be.true;
+
+      el.modelValue = { currency: 'EUR' };
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'missing amount property').to.be.true;
+
+      el.modelValue = null;
+      await el.updateComplete;
+      // @ts-ignore
+      expect(el._isEmpty(), 'null modelValue').to.be.true;
+    });
   });
 }

packages/ui/components/input-amount-dropdown/test/LionInputAmountDropdown.test.js

@@ -1,6 +1,7 @@
 import { mimicUserChangingDropdown } from '@lion/ui/input-amount-dropdown-test-helpers.js';
 import { runInputAmountDropdownSuite } from '@lion/ui/input-amount-dropdown-test-suites.js';
 import { LionInputAmountDropdown } from '@lion/ui/input-amount-dropdown.js';
+import { Required } from '@lion/ui/form-core.js';
 import { aTimeout, expect, fixture } from '@open-wc/testing';
 import { LionSelectRich } from '@lion/ui/select-rich.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -194,7 +195,25 @@ describe('WithFormControlInputAmountDropdown', () => {
       el.modelValue = { currency: 'EUR' };
       await aTimeout(0);
       el.modelValue = { currency: 'EUR', amount: '' };
-      expect(el.hasFeedbackFor).to.deep.equal(['error']);
+      expect(el.hasFeedbackFor).to.deep.equal([]);
     });
   });
+
+  it('includes error in showsFeedbackFor when required, empty, and touched & dirty', async () => {
+    const el = /** @type {LionInputAmountDropdown} */ (
+      await fixture(html`
+        <lion-input-amount-dropdown
+          .allowedCurrencies="${['GBP', 'EUR']}"
+          .validators="${[new Required()]}"
+        ></lion-input-amount-dropdown>
+      `)
+    );
+    await el.updateComplete;
+    el.touched = true;
+    el.dirty = true;
+    await el.updateComplete;
+    await el.feedbackComplete;
+    expect(el.hasFeedbackFor).to.include('error', 'hasFeedbackFor');
+    expect(el.showsFeedbackFor).to.include('error', 'showsFeedbackFor');
+  });
 });