try and maintain focus when re-rendering cart

Author: mattbrailsford

src/Umbraco.Commerce.Cart/Client/src/components/ucc-cart-modal.element.ts

@@ -1,7 +1,7 @@
 import { UCC_CART_CONTEXT } from "../contexts/ucc.context.ts";
 import { CartConfig, CartItem } from "../types.ts";
 import { UccModalElement } from "./ucc-modal.element.ts";
-import { debounce, delegate } from "../utils.ts";
+import {debounce, delegate, getUniqueSelector} from "../utils.ts";
 import { UccCartRepository } from "../repositories/cart.respository.ts";
 import { UccEvent } from "../events/ucc.event.ts";
 
@@ -65,6 +65,9 @@ export class UccCartModalElement extends UccModalElement
 
         const cart = this._context.cart.get();
         if (cart && cart.items.length > 0) {
+            const activeEl = this._host.ownerDocument.activeElement as HTMLElement;
+            const activeElSelector = activeEl ? getUniqueSelector(activeEl) : undefined;
+            const activeElCaretPos = activeEl instanceof HTMLInputElement ? activeEl.selectionStart : undefined;
             this._host.querySelector('.ucc-cart-items')!.innerHTML = cart.items.map((item) => {
                 const propsToDisplay = Object.keys(item.properties ?? {}).filter((x) => (config.properties ?? []).map(y => y.toLowerCase()).includes(x.toLowerCase()));
                 return `
@@ -136,6 +139,15 @@ export class UccCartModalElement extends UccModalElement
             this._host.querySelector<HTMLElement>('.ucc-cart-total--taxes .ucc-cart-total-value')!.textContent = cart.subtotal.tax;
             this._host.querySelector<HTMLElement>('.ucc-cart-total--total .ucc-cart-total-value')!.textContent = cart.subtotal.withTax;
             this._host.querySelector<HTMLElement>('.ucc-cart-checkout')!.classList.remove('ucc-cart-checkout--disabled');
+            if (activeElSelector) {
+                const activeEl = this._host.querySelector<HTMLElement>(activeElSelector);
+                if (activeEl) {
+                    activeEl.focus();
+                    if (activeEl instanceof HTMLInputElement && activeElCaretPos) {
+                        activeEl.setSelectionRange(activeElCaretPos!, activeElCaretPos!);
+                    }
+                }
+            }
         } else {
             this._host.querySelector<HTMLElement>('.ucc-cart-items')!.innerHTML = `
                     <div class="ucc-cart-empty">

src/Umbraco.Commerce.Cart/Client/src/utils.ts

@@ -49,6 +49,40 @@ export function trapFocus(e: KeyboardEvent, selector:string)
     }
 }
 
+export const getUniqueSelector = (element:Element) => {
+    if (!(element instanceof Element)) return null;
+
+    let selector = [];
+
+    while (element.parentElement) {
+        let tag = element.tagName.toLowerCase();
+
+        // Use ID if available (most specific)
+        if (element.id) {
+            selector.unshift(`#${element.id}`);
+            break;
+        }
+
+        // Use class names if available
+        let classSelector = element.className
+            .split(/\s+/)
+            .filter(Boolean)
+            .map(cls => `.${cls}`)
+            .join('');
+
+        // Get index among siblings of the same type
+        let siblings = Array.from(element.parentElement.children).filter(
+            el => el.tagName === element.tagName
+        );
+        let index = siblings.length > 1 ? `:nth-of-type(${siblings.indexOf(element) + 1})` : '';
+
+        selector.unshift(tag + classSelector + index);
+        element = element.parentElement;
+    }
+
+    return selector.join(' > ');
+}
+
 export type ReactiveValue<T> = {
     hasValue: () => boolean;
     get: () => T | null;