@gjsify/adwaita-web 0.16.3 → 0.16.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.16.3",
+    "version": "0.16.4",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -41,13 +41,13 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-fonts": "^0.16.3",
-        "@gjsify/adwaita-icons": "^0.16.3",
+        "@gjsify/adwaita-fonts": "^0.16.4",
+        "@gjsify/adwaita-icons": "^0.16.4",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.16.3",
-        "@gjsify/unit": "^0.16.3",
+        "@gjsify/cli": "^0.16.4",
+        "@gjsify/unit": "^0.16.4",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/src/adw-drop-down.spec.ts

@@ -102,21 +102,26 @@ export const AdwDropDownTest = async () => {
     });
 
     await describe('adw-drop-down notify-on-change', async () => {
-        await it('fires notify::selected + change on a real change only', async () => {
+        await it('a programmatic set fires notify::selected but NOT change (DOM <select> semantics)', async () => {
             const dd = makeDropDown();
             dd.options = ['a', 'b', 'c'];
             let notifyCount = 0;
-            let lastChange: unknown = null;
+            let changeCount = 0;
             dd.addEventListener('notify::selected', () => notifyCount++);
-            dd.addEventListener('change', (e) => {
-                lastChange = (e as CustomEvent).detail;
-            });
-            dd.selected = 2;
-            expect(notifyCount).toBe(1);
-            expect(lastChange).toStrictEqual({ index: 2, value: 'c', label: 'c' });
-            // Re-selecting the same index must NOT fire again.
+            dd.addEventListener('change', () => changeCount++);
+            // Programmatic `.selected`: notify::selected fires (GObject property-notify), but the
+            // user-facing DOM `change` must NOT — native `select.value = x` fires no `change` either.
             dd.selected = 2;
             expect(notifyCount).toBe(1);
+            expect(changeCount).toBe(0);
+            // Programmatic `.selectedValue` is likewise silent on `change`.
+            dd.selectedValue = 'a';
+            expect(notifyCount).toBe(2);
+            expect(changeCount).toBe(0);
+            // Re-selecting the same value fires neither event again.
+            dd.selectedValue = 'a';
+            expect(notifyCount).toBe(2);
+            expect(changeCount).toBe(0);
             dd.remove();
         });
 

package/src/elements/adw-drop-down.ts

@@ -190,7 +190,7 @@ export class AdwDropDown extends HTMLElement {
             this._renderAll();
         } else if (name === 'selected') {
             const index = Number.parseInt(value ?? '', 10);
-            if (!Number.isNaN(index)) this._selectIndex(index);
+            if (!Number.isNaN(index)) this._selectIndex(index, { fromAttr: true });
         } else if (name === 'enable-search') {
             this._renderPopover();
         } else if (name === 'disabled') {
@@ -212,26 +212,33 @@ export class AdwDropDown extends HTMLElement {
         }
     }
 
-    private _selectIndex(index: number, fromAttr = false): void {
+    private _selectIndex(index: number, opts: { fromAttr?: boolean; fromUser?: boolean } = {}): void {
         if (!Number.isFinite(index) || index < 0 || index >= this._options.length) return;
         const changed = index !== this._selected;
         this._selected = index;
         this._updateLabel();
         this._updateSelectedStates();
         // Keep the attribute in sync without re-entering the guarded callback.
-        if (!fromAttr && this.getAttribute('selected') !== String(index)) {
+        if (!opts.fromAttr && this.getAttribute('selected') !== String(index)) {
             this.setAttribute('selected', String(index));
         }
-        // Notify only on an actual change (GObject notify semantics).
         if (changed) {
             const option = this._options[index];
+            // `notify::selected` mirrors GObject property-notify: it fires on EVERY change,
+            // programmatic included.
             this.dispatchEvent(new CustomEvent('notify::selected', { bubbles: true, detail: { selected: index } }));
-            this.dispatchEvent(
-                new CustomEvent('change', {
-                    bubbles: true,
-                    detail: { index, value: option?.value ?? '', label: option?.label ?? '' },
-                }),
-            );
+            // `change` mirrors the DOM <select> contract: it fires ONLY on a user-initiated change.
+            // A programmatic `.selected`/`.selectedValue`/`selected`-attribute assignment stays silent
+            // (just as native `select.value = x` fires no `change`), so consumers can set the value
+            // without guarding against a spurious user-style event.
+            if (opts.fromUser) {
+                this.dispatchEvent(
+                    new CustomEvent('change', {
+                        bubbles: true,
+                        detail: { index, value: option?.value ?? '', label: option?.label ?? '' },
+                    }),
+                );
+            }
         }
     }
 
@@ -302,7 +309,7 @@ export class AdwDropDown extends HTMLElement {
         const match = this._options.findIndex((o) => o.label.toLowerCase().startsWith(this._typeAheadBuffer));
         if (match < 0) return;
         if (this._active) this._itemButtons[match]?.focus();
-        else this._selectIndex(match);
+        else this._selectIndex(match, { fromUser: true });
     }
 
     /** Filter the visible items by a search query (case-insensitive substring). */
@@ -378,7 +385,7 @@ export class AdwDropDown extends HTMLElement {
 
             item.append(label, check);
             item.addEventListener('click', () => {
-                this._selectIndex(index);
+                this._selectIndex(index, { fromUser: true });
                 this._setActive(false);
                 this._buttonEl.focus();
             });