Auto-focus 1st focusable element in pages with a ".primary-form"

public/js/mc.js

@@ -94,6 +94,7 @@ $(document).ready(function () {
     if (body.is('.stag_rhs_collapsed')) {
         icon.removeClass().addClass('fa fa-arrow-left');
     }
+    initPrimaryForm();
     initFastLoad();
     if(typeof initializeCalendar !== 'undefined') {
         initializeCalendar();
@@ -196,6 +197,7 @@ function onFastLoaded(_data, _href, _history) {
         content += '<script src="/js/yemi.js?_=2"></script>';
         targetParent.html(content);
         window.setTimeout(function() {
+            initPrimaryForm();
             initFastLoad(targetParent);
         }, 50);
         if(typeof initializeCalendar !== 'undefined') {
@@ -230,6 +232,12 @@ function fastLoad(_href, _history = true, _useCache = true) {
     }
 }
 
+function initPrimaryForm() {
+    if($('.primary-form:visible').length) {
+        $('.primary-form:visible').first().find('input, textarea, select').first().focus().select();
+    }
+}
+
 function openInRHS(_url) {
     window.top.showRHS();
     var icon = $('.stag_rhs_toggle i');

resources/views/app/new-patient.blade.php

@@ -4,9 +4,9 @@
 
     <?php $patients = [1,2,3,4]; ?>
 
-    <div class="row">
-        <div class="col-6">
-            <div class="card mt-3 d-block mb-3" moe="">
+    <div class="p-3 mcp-theme-1">
+        <div class="col-12 col-lg-6 px-0">
+            <div class="card d-block mb-3" moe="">
 
                 <div class="card-header">
                     <strong>
@@ -15,7 +15,7 @@
                     </strong>
                 </div>
                 <div class="card-body">
-                    <form show url="/api/client/create" class="px-3 pt-3 pb-1" redir="patients/view/[data]">
+                    <form show url="/api/client/create" class="px-3 pt-3 pb-1 primary-form" redir="patients/view/[data]">
                         @if (session('message'))
                             <div class="alert alert-danger">{{ session('message') }}</div>
                         @endif