Preventing change event from being dispatched if value hasn't changed

docs/src/assets/styles.css

@@ -268,9 +268,6 @@
   .relative {
     position: relative;
   }
-  .static {
-    position: static;
-  }
   .sticky {
     position: sticky;
   }
@@ -1052,10 +1049,6 @@
     --tw-duration: 400ms;
     transition-duration: 400ms;
   }
-  .ease-in-out {
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
-  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -5085,15 +5078,15 @@ code.hljs {
   syntax: "*";
   inherits: false;
 }
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -5170,8 +5163,8 @@ code.hljs {
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
-      --tw-ease: initial;
       --tw-content: "";
+      --tw-ease: initial;
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;

src/js/select.js

@@ -1,7 +1,7 @@
 (() => {
   const initSelect = (selectComponent) => {
     const trigger = selectComponent.querySelector(':scope > button');
-    const selectedValue = trigger.querySelector(':scope > span');
+    const selectedLabel = trigger.querySelector(':scope > span');
     const popover = selectComponent.querySelector(':scope > [data-popover]');
     const listbox = popover.querySelector('[role="listbox"]');
     const input = selectComponent.querySelector(':scope > input[type="hidden"]');
@@ -47,7 +47,7 @@
 
     const updateValue = (option) => {
       if (option) {
-        selectedValue.innerHTML = option.dataset.label || option.innerHTML;
+        selectedLabel.innerHTML = option.dataset.label || option.innerHTML;
         input.value = option.dataset.value;
         listbox.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute('aria-selected');
         option.setAttribute('aria-selected', 'true');
@@ -80,32 +80,29 @@
     const selectOption = (option) => {
       if (!option) return;
       
-      if (option.dataset.value != null) {
+      const oldValue = input.value;
+      const newValue = option.dataset.value;
+
+      if (newValue != null && newValue !== oldValue) {
         updateValue(option);
       }
       
       closePopover();
       
-      const event = new CustomEvent('change', {
-        detail: { value: option.dataset.value },
-        bubbles: true
-      });
-      selectComponent.dispatchEvent(event);
-    };
-
-    const selectByValue = (value) => {
-      const option = options.find(opt => opt.dataset.value === value);
-      if (option) {
-        updateValue(option);
-        
+      if (newValue !== oldValue) {
         const event = new CustomEvent('change', {
-          detail: { value: option.dataset.value },
+          detail: { value: newValue },
           bubbles: true
         });
         selectComponent.dispatchEvent(event);
       }
     };
 
+    const selectByValue = (value) => {
+      const option = options.find(opt => opt.dataset.value === value);
+      selectOption(option);
+    };
+
     if (filter) {
       const filterOptions = () => {
         const searchTerm = filter.value.trim().toLowerCase();