Click the whole Selector instead of arrow only

app/components/selector_component/selector_component.html.haml

@@ -1,9 +1,9 @@
 = component_controller do
   .selector{ class: ("selector-close" if @state == :close) }
-    .selector-main 
+    .selector-main{data: reflex_data_attributes(:toggle)}
       .selector-main-title 
         = @title
-      .selector-arrow{data: reflex_data_attributes(:toggle)}
+      .selector-arrow
     .selector-wrapper
       .selector-items
         - @items.each do |item|

app/components/selector_component/selector_component.scss

@@ -5,6 +5,7 @@
     border: 1px solid $disabled-light;
     height: 3em;
     position: relative;
+    cursor: pointer;
 
     .selector-main-title {
       line-height: 3em;
@@ -18,7 +19,6 @@
       height: 3em;
       width: 1.5em;
       top: -1px;
-      cursor: pointer;
 
       &:after {
         content: "";

app/components/selector_with_filter_component/selector_with_filter_component.html.haml

@@ -1,6 +1,6 @@
 = component_controller do
   .super-selector.selector{ class: ("selector-close" if @state == :close) }
-    .selector-main
+    .selector-main{data: reflex_data_attributes(:toggle)}
       .super-selector-label
         = @title
       .super-selector-selected-items
@@ -12,7 +12,7 @@
         - else
           .super-selector-selected-item
             = t(@selected_items_i18n_key, count: @selected_items.length)
-      .selector-arrow{data: reflex_data_attributes(:toggle)}
+      .selector-arrow
     .selector-wrapper
       .super-selector-search
         %input{type: "text", placeholder: t("components.selector_with_filter.search_placeholder"), data: reflex_data_attributes("debounced:input->search"), value: @query}