Fix selectize issue for all

app/components/document_doctrine_show_component/document_doctrine_show_component.html.erb

@@ -6,7 +6,7 @@
   </div>
 
   <div class="col-sm-2 d-flex justify-content-end pe-0" data-controller="doctrines" data-document-id="<%= document_id %>" data-doctrine-id="<%= id %>" >
-    <a class="btn btn-success me-3"data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Edit </a>
+    <a class="btn btn-success me-3 for-selectize-edit"data-action="click->doctrines#renderForm" data-bs-toggle="modal" data-bs-target="#doctrineModal"> Edit </a>
     <a class="btn btn-danger " data-action="click->doctrines#delete" > Delete </a>
   </div>
 </div>

app/javascript/controllers/doctrines_controller.js

@@ -91,12 +91,12 @@ export default class extends ApplicationController {
             $('.toast').addClass('bg-success').show()
             $( ".toast-body" ).html( "<span><b>Submitted Successfully</b></span>" ),
             location.pathname = "/documents/" + document_id + "/doctrines/" + data.id
+          }else {
+            $(".btn-close-x").trigger("click"),
+            $('.toast').addClass('bg-danger').show(),
+            $( ".toast-body" ).html( "<span><b>Unexpected Error Problem Occurred</b></span>" )
           }
-        }, 
-          $(".btn-close-x").trigger("click"),
-          $('.toast').addClass('bg-danger').show(),
-          $( ".toast-body" ).html( "<span><b>Unexpected Error Problem Occurred</b></span>" )
-        )
+        })
       }
     }
   }

app/javascript/controllers/selectize_controller.js

@@ -90,9 +90,9 @@ export default class extends ApplicationController {
           if ($subjects_selectize.length) $subjects_selectize[0].selectize.addOption(result, true);
         })
 
-        if ($subject_ids_selectize.length) $subject_ids_selectize[0].selectize.refreshOptions();
-
-        if ($subjects_selectize.length) $subjects_selectize[0].selectize.refreshOptions();
+        //this code will be autoFocus on the first selectize
+        // if ($subject_ids_selectize.length) $subject_ids_selectize[0].selectize.refreshOptions();
+        // if ($subjects_selectize.length) $subjects_selectize[0].selectize.refreshOptions();
       }
     });
 

app/javascript/src/application.scss

@@ -117,3 +117,11 @@
   overflow-x: hidden;
   // box-shadow: inset 0 0 0 2000px rgba(251, 251, 251, 0.3);
 }
+
+.subject-ids-selectize {
+  width: auto !important;
+}
+
+.not-full input {
+  width: auto !important;
+}

app/views/reports/index.html.erb

@@ -8,7 +8,7 @@
         <hr class="simple">
         <div class="mb-3">
           <label for="exampleFormControlInput1" class="form-label text-white"> Subjects </label>
-          <select class="form-control subject-ids-selectize p-0" name="subject_ids[]" id="subject_ids_" multiple="true"> </select>
+          <select class="subject-ids-selectize p-0" name="subject_ids[]" id="subject_ids_" multiple="true"> </select>
         </div>
         <div class="mb-3">
           <label for="exampleFormControlInput1" class="form-label text-white"> Date Created (Start) </label>
@@ -23,7 +23,7 @@
         <hr class="simple">
         <div class="mb-3">
           <label for="exampleFormControlInput1" class="form-label text-white"> Users </label>
-          <%= select_tag :user_ids, options_from_collection_for_select(@users, :id, :name, params[:user_ids]), class: "form-control default-selectize p-0", multiple: true %>
+          <%= select_tag :user_ids, options_from_collection_for_select(@users, :id, :name, params[:user_ids]), class: "default-selectize p-0", multiple: true %>
         </div>
 
         <div class="d-flex justify-content-end mt-5">