Merge pull request #77 from PhlexUI/cirdes/select-z-index-and-change-…

…event

Select fix z-index and add change event

lib/rbui/select/select_content.rb

@@ -10,7 +10,7 @@ def initialize(**attrs)
     def view_template(&block)
       div(**attrs) do
         div(
-          class: "z-50 z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md animate-out group-data-[rbui--select-open-value=true]/select:animate-in fade-out-0 group-data-[rbui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[rbui--select-open-value=true]/select:zoom-in-95 slide-in-from-top-2", &block
+          class: "max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md animate-out group-data-[rbui--select-open-value=true]/select:animate-in fade-out-0 group-data-[rbui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[rbui--select-open-value=true]/select:zoom-in-95 slide-in-from-top-2", &block
         )
       end
     end
@@ -25,7 +25,7 @@ def default_attrs
         data: {
           rbui__select_target: "content"
         },
-        class: "hidden w-full absolute top-0 left-0"
+        class: "hidden w-full absolute top-0 left-0 z-50"
       }
     end
   end

lib/rbui/select/select_controller.js

@@ -23,7 +23,9 @@ export default class extends Controller {
   selectItem(event) {
     event.preventDefault();
 
-    this.rbuiSelectItemOutlets.forEach(item => item.handleSelectItem(event))
+    this.rbuiSelectItemOutlets.forEach(item => item.handleSelectItem(event));
+
+    this.dispatchOnChange(this.inputTarget.value, event.target.dataset.value);
 
     this.inputTarget.value = event.target.dataset.value;
     this.valueTarget.innerText = event.target.innerText;
@@ -135,4 +137,14 @@ export default class extends Controller {
     this.triggerTarget.setAttribute("aria-activedescendant", true);
     this.triggerTarget.focus({ preventScroll: true });
   }
+
+  dispatchOnChange(oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    const event = new InputEvent('change', {
+      bubbles: true,
+      cancelable: true,
+    });
+    this.inputTarget.dispatchEvent(event);
+  }
 }