Calendar - new appt. modal - no select2 open + <hr>

resources/views/app/patient/appointment-calendar.blade.php

@@ -165,6 +165,7 @@
                         </select>
                     </div>
                 </div>
+                <hr class="my-2">
                 <input type="hidden" name="referringProUid" value="{{ $pro->uid }}">
                 <div class="row mb-2">
                     <div class="col-3 text-secondary">
@@ -474,7 +475,8 @@
                                     width: '100%',
                                     templateResult: function(_state) {
                                         return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
-                                    }
+                                    },
+                                    placeholder: '-- Select Pro --'
                                 })
                                 .on('change', function() {
                                     self.newAppointment.proUid = $(this).val();
@@ -484,7 +486,8 @@
                                     width: '100%',
                                     templateResult: function(_state) {
                                         return $('<span class="mcp-theme-1"><span>' + _state.text + '</span></span>');
-                                    }
+                                    },
+                                    placeholder: '-- Select Pro --'
                                 })
                                 .on('change', function() {
                                     self.editAppointment.proUid = $(this).val();
@@ -716,8 +719,7 @@
                             Vue.nextTick(function() {
                                 $('#addApptPro').find('option').prop('selected', false);
                                 $('#addApptPro').trigger('change');
-                                showStagPopup('client-add-appointment');
-                                $('#addApptPro').select2('open');
+                                showStagPopup('client-add-appointment', true);
                             });
                         },
                         addAppointment: function() {
@@ -761,7 +763,7 @@
                             this.editAppointment.status = this.selectedEvent.extendedProps.status;
                             Vue.nextTick(function() {
                                 $('#editApptPro').trigger('change');
-                                showStagPopup('client-edit-appointment');
+                                showStagPopup('client-edit-appointment', true);
                             });
                         },
                         updateAppointment: function() {

resources/views/layouts/template.blade.php

@@ -275,15 +275,17 @@
         });
     </script>
     <script>
-        function showStagPopup(_key) {
+        function showStagPopup(_key, _noAutoFocus) {
             $('html, body').addClass('no-scroll');
             let stagPopup = $('[stag-popup-key="' + _key + '"]');
             stagPopup.addClass('show');
             stagPopup.find('[moe][initialized]').removeAttr('initialized');
             initMoes();
-            window.setTimeout(function() {
-                stagPopup.find('input[type="text"]:not([readonly]):visible,select:visible').first().focus();
-            }, 150);
+            if(!_noAutoFocus) {
+                window.setTimeout(function() {
+                    stagPopup.find('input[type="text"]:not([readonly]):visible,select:visible').first().focus();
+                }, 150);
+            }
             return false;
         }
         function submitStagPopup(_form) {