@lion/ui 0.4.0 → 0.4.2

package/components/calendar/src/LionCalendar.js

@@ -799,7 +799,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @private
    */
   __clickDateDelegation(ev) {
-    const el = /** @type {HTMLElement & { date: Date }} */ (ev.target);
+    const el = /** @type {HTMLElement & { date: Date }} */ (ev.composedPath()[0]);
     if (isDayButton(el) && !isDisabledDayButton(el)) {
       this.__dateSelectedByUser(el.date);
     }
@@ -866,7 +866,9 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     switch (ev.key) {
       case ' ':
       case 'Enter':
-        this.__dayButtonSelection(/** @type {HTMLElement & { date: Date }} */ (ev.target));
+        this.__dayButtonSelection(
+          /** @type {HTMLElement & { date: Date }} */ (ev.composedPath()[0]),
+        );
         break;
       case 'ArrowUp':
         this.__modifyDate(-7, { dateType: '__focusedDate', type: 'Date' });

package/components/combobox/src/LionCombobox.js

@@ -849,7 +849,9 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
    * @protected
    */
   _handleAutocompletion() {
-    const hasSelection = this._inputNode.value.length !== this._inputNode.selectionStart;
+    const isSelectionEmpty = this._inputNode.selectionStart === this._inputNode.selectionEnd;
+    const hasSelection =
+      !isSelectionEmpty && this._inputNode.value.length !== this._inputNode.selectionStart;
 
     const inputValue = this._inputNode.value;
     const inputSelectionStart = this._inputNode.selectionStart;

package/components/combobox/test/lion-combobox.test.js

@@ -1610,6 +1610,34 @@ describe('lion-combobox', () => {
       expect(el.checkedIndex).to.equal(0);
     });
 
+    it('filters options correctly when changing the middle of the word', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" autocomplete="list" match-mode="all">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const { _inputNode } = getComboboxMembers(el);
+
+      mimicUserTyping(el, 'char');
+      expect(_inputNode.value).to.equal('char');
+      await el.updateComplete; // Char
+
+      expect(getFilteredOptionValues(el)).to.eql(['Chard']);
+
+      _inputNode.setSelectionRange(3, 3);
+      await mimicUserTypingAdvanced(el, ['Backspace', 'i', 'c', 'o']);
+      await el.updateComplete; // Chicor
+
+      expect(_inputNode.value).to.equal('chicor');
+      expect(getFilteredOptionValues(el)).to.eql(['Chicory']);
+    });
+
     it('computation of "user intends autofill" works correctly afer autofill', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`

package/components/combobox/test-helpers/combobox-helpers.js

@@ -63,39 +63,33 @@ export function mimicKeyPress(el, key) {
 export async function mimicUserTypingAdvanced(el, values) {
   const { _inputNode } = getComboboxMembers(el);
   _inputNode.dispatchEvent(new Event('focusin', { bubbles: true }));
+  let cursorPosition = _inputNode.selectionStart || 0;
 
   for (const key of values) {
     // eslint-disable-next-line no-await-in-loop, no-loop-func
     await new Promise(resolve => {
-      const hasSelection = _inputNode.selectionStart !== _inputNode.selectionEnd;
+      const selectionStart = _inputNode.selectionStart || 0;
+      const selectionEnd = _inputNode.selectionEnd || 0;
+      const hasSelection = selectionStart !== selectionEnd;
 
       if (key === 'Backspace') {
         if (hasSelection) {
           _inputNode.value =
-            _inputNode.value.slice(
-              0,
-              _inputNode.selectionStart ? _inputNode.selectionStart : undefined,
-            ) +
-            _inputNode.value.slice(
-              _inputNode.selectionEnd ? _inputNode.selectionEnd : undefined,
-              _inputNode.value.length,
-            );
-        } else {
-          _inputNode.value = _inputNode.value.slice(0, -1);
+            _inputNode.value.slice(0, selectionStart) + _inputNode.value.slice(selectionEnd);
+          cursorPosition = selectionStart;
+        } else if (cursorPosition > 0) {
+          _inputNode.value =
+            _inputNode.value.slice(0, cursorPosition - 1) + _inputNode.value.slice(cursorPosition);
+          cursorPosition -= 1;
         }
       } else if (hasSelection) {
         _inputNode.value =
-          _inputNode.value.slice(
-            0,
-            _inputNode.selectionStart ? _inputNode.selectionStart : undefined,
-          ) +
-          key +
-          _inputNode.value.slice(
-            _inputNode.selectionEnd ? _inputNode.selectionEnd : undefined,
-            _inputNode.value.length,
-          );
+          _inputNode.value.slice(0, selectionStart) + key + _inputNode.value.slice(selectionEnd);
+        cursorPosition = selectionStart + key.length;
       } else {
-        _inputNode.value += key;
+        _inputNode.value =
+          _inputNode.value.slice(0, cursorPosition) + key + _inputNode.value.slice(cursorPosition);
+        cursorPosition += 1;
       }
 
       mimicKeyPress(_inputNode, key);

package/components/input-amount/src/LionInputAmount.js

@@ -159,6 +159,9 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
     if (currency) {
       if (!this.__currencyDisplayNodeIsConnected) {
         this.appendChild(this.__currencyDisplayNode);
+        this.addToAriaLabelledBy(this.__currencyDisplayNode, {
+          idPrefix: this._currencyDisplayNodeSlot,
+        });
         this.__currencyDisplayNodeIsConnected = true;
       }
       this.__currencyDisplayNode.textContent = this.__currencyLabel;
@@ -182,11 +185,11 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
   }
 
   /**
-   * @returns the current currency display node
+   * @returns {HTMLElement | undefined} the current currency display node
    * @private
    */
   get __currencyDisplayNode() {
-    const node = Array.from(this.children).find(
+    const node = /** @type {HTMLElement[]} */ (Array.from(this.children)).find(
       child => child.slot === this._currencyDisplayNodeSlot,
     );
     if (node) {

package/components/input-amount/test/lion-input-amount.test.js

@@ -308,6 +308,27 @@ describe('<lion-input-amount>', () => {
       expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
     });
 
+    it('adds currency id to aria-labelledby of input when currency switches from undefined', async () => {
+      const el = /** @type {LionInputAmount} */ (
+        await fixture(`<lion-input-amount></lion-input-amount>`)
+      );
+
+      el.currency = 'EUR';
+
+      let resolved = await el.updateComplete;
+      while (!resolved) {
+        resolved = await el.updateComplete;
+      }
+
+      const label = /** @type {HTMLElement[]} */ (Array.from(el.children)).find(
+        child => child.slot === 'after',
+      );
+      const { _inputNode } = getInputMembers(/** @type {* & LionInput} */ (el));
+
+      expect(label?.id).not.equal('');
+      expect(_inputNode.getAttribute('aria-labelledby')).to.contain(label?.id);
+    });
+
     it('adds an aria-label to currency slot', async () => {
       const el = /** @type {LionInputAmount} */ (
         await fixture(`<lion-input-amount currency="EUR"></lion-input-amount>`)

package/components/overlays/src/utils/adopt-styles.js

@@ -119,7 +119,7 @@ export function adoptStyle(renderRoot, style, { teardown = false } = {}) {
   if (!teardown) {
     // @ts-ignore
     // eslint-disable-next-line no-param-reassign
-    renderRoot.adoptedStyleSheets.push(sheet);
+    renderRoot.adoptedStyleSheets = [...renderRoot.adoptedStyleSheets, sheet];
   } else if (renderRoot.adoptedStyleSheets.includes(sheet)) {
     renderRoot.adoptedStyleSheets.splice(renderRoot.adoptedStyleSheets.indexOf(sheet), 1);
   }