fix modal autofocus problem, datepicker not shown on begin date (#653)

assets/js/kimai.js

@@ -225,7 +225,16 @@ $(function() {
             // load new form from given content
             if ($(html).find('#form_modal .modal-content').length > 0 ) {
                 // switch classes, in case the modal type changed
-                $('#remote_form_modal').attr('class', $(html).find('#form_modal').attr('class'));
+                $modal.on('hidden.bs.modal', function () {
+                    if ($modal.hasClass('modal-danger')) {
+                        $modal.removeClass('modal-danger');
+                    }
+                });
+
+                if ($(html).find('#form_modal').hasClass('modal-danger')) {
+                    $modal.addClass('modal-danger');
+                }
+
                 // TODO cleanup widgets before replacing the content?
                 $('#remote_form_modal .modal-content').replaceWith(
                     $(html).find('#form_modal .modal-content')
@@ -246,15 +255,14 @@ $(function() {
             // see https://github.com/kevinpapst/kimai2/issues/618
             var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
             $.fn.modal.Constructor.prototype.enforceFocus = function() {};
-            $modal.on('hidden', function() {
+            $modal.on('hidden.bs.modal', function () {
                 $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
             });
-            $modal.modal({ backdrop : false });
             // -----------------------------------------------------------------------
 
             // workaround for autofocus attribute, as the modal "steals" it
             $modal.on('shown.bs.modal', function () {
-                $(this).find('input:visible:first').focus().delay(1000).focus();
+                $(this).find('input[type=text],textarea,select').filter(':not("[data-datetimepicker=on]")').filter(':visible:first').focus().delay(1000).focus();
             });
 
             $modal.modal('show');
@@ -286,6 +294,7 @@ $(function() {
                         return false;
                     },
                     error: function(xhr, err) {
+                        // FIXME problem in google and 500 error, keeps on submitting...
                         // what else could we do? submitting again at least gives us the opportunity to see errors,
                         // which maybe would be hidden otherwise... this one is totally up for discussion!
                         $form.submit();

public/build/manifest.json

@@ -1,28 +1,28 @@
 {
-  "build/app.js": "./app.js?6b33d608a88c93cb8dbc",
+  "build/app.js": "./app.js?3589af990f22f7616e76",
-  "build/app.css": "./app.css?d1c5aa3942706f7bffb181e234e112de",
+  "build/app.css": "./app.css?d19ec32eb7c1a1b17c99cc2154dd69dc",
-  "build/images/blue@2x.png": "./images/blue@2x.png?2694acfd",
   "build/images/blue.png": "./images/blue.png?96f8a905",
-  "build/fonts/fa-solid-900.woff2": "./fonts/fa-solid-900.woff2?e8a92a29",
+  "build/images/blue@2x.png": "./images/blue@2x.png?2694acfd",
-  "build/images/fa-solid-900.svg": "./images/fa-solid-900.svg?666a82cb",
-  "build/images/glyphicons-halflings-regular.svg": "./images/glyphicons-halflings-regular.svg?89889688",
-  "build/fonts/glyphicons-halflings-regular.eot": "./fonts/glyphicons-halflings-regular.eot?f4769f9b",
-  "build/fonts/fa-solid-900.ttf": "./fonts/fa-solid-900.ttf?a7a790d4",
   "build/fonts/fa-brands-400.eot": "./fonts/fa-brands-400.eot?69b310ed",
-  "build/fonts/fa-regular-400.eot": "./fonts/fa-regular-400.eot?0b7928f6",
+  "build/images/fa-brands-400.svg": "./images/fa-brands-400.svg?5da7e33c",
+  "build/fonts/fa-brands-400.ttf": "./fonts/fa-brands-400.ttf?d94572dd",
   "build/fonts/fa-brands-400.woff": "./fonts/fa-brands-400.woff?e9f83339",
-  "build/fonts/glyphicons-halflings-regular.woff2": "./fonts/glyphicons-halflings-regular.woff2?448c34a5",
+  "build/fonts/fa-brands-400.woff2": "./fonts/fa-brands-400.woff2?66f625f1",
-  "build/fonts/fa-solid-900.eot": "./fonts/fa-solid-900.eot?0b93480e",
+  "build/fonts/fa-regular-400.eot": "./fonts/fa-regular-400.eot?0b7928f6",
-  "build/fonts/fa-solid-900.woff": "./fonts/fa-solid-900.woff?dfc040d5",
-  "build/fonts/fa-regular-400.woff": "./fonts/fa-regular-400.woff?d9e29124",
-  "build/fonts/fa-regular-400.woff2": "./fonts/fa-regular-400.woff2?930c1264",
   "build/images/fa-regular-400.svg": "./images/fa-regular-400.svg?4e41caaf",
   "build/fonts/fa-regular-400.ttf": "./fonts/fa-regular-400.ttf?cdd8fa76",
-  "build/fonts/fa-brands-400.ttf": "./fonts/fa-brands-400.ttf?d94572dd",
+  "build/fonts/fa-regular-400.woff": "./fonts/fa-regular-400.woff?d9e29124",
-  "build/fonts/glyphicons-halflings-regular.woff": "./fonts/glyphicons-halflings-regular.woff?fa277232",
+  "build/fonts/fa-regular-400.woff2": "./fonts/fa-regular-400.woff2?930c1264",
-  "build/fonts/fa-brands-400.woff2": "./fonts/fa-brands-400.woff2?66f625f1",
+  "build/fonts/fa-solid-900.eot": "./fonts/fa-solid-900.eot?0b93480e",
+  "build/images/fa-solid-900.svg": "./images/fa-solid-900.svg?666a82cb",
+  "build/fonts/fa-solid-900.ttf": "./fonts/fa-solid-900.ttf?a7a790d4",
+  "build/fonts/fa-solid-900.woff": "./fonts/fa-solid-900.woff?dfc040d5",
+  "build/fonts/fa-solid-900.woff2": "./fonts/fa-solid-900.woff2?e8a92a29",
+  "build/fonts/glyphicons-halflings-regular.eot": "./fonts/glyphicons-halflings-regular.eot?f4769f9b",
+  "build/images/glyphicons-halflings-regular.svg": "./images/glyphicons-halflings-regular.svg?89889688",
   "build/fonts/glyphicons-halflings-regular.ttf": "./fonts/glyphicons-halflings-regular.ttf?e18bbf61",
-  "build/images/fa-brands-400.svg": "./images/fa-brands-400.svg?5da7e33c",
+  "build/fonts/glyphicons-halflings-regular.woff": "./fonts/glyphicons-halflings-regular.woff?fa277232",
+  "build/fonts/glyphicons-halflings-regular.woff2": "./fonts/glyphicons-halflings-regular.woff2?448c34a5",
   "build/images/default_avatar.png": "./images/default_avatar.png?fc197350",
   "build/images/signature.png": "./images/signature.png?5f58501e"
 }

src/Form/TimesheetEditForm.php

@@ -111,9 +111,6 @@ class TimesheetEditForm extends AbstractType
                 'label' => 'label.begin',
                 'model_timezone' => $timezone,
                 'view_timezone' => $timezone,
-                'attr' => [
-                    'autofocus' => 'autofocus',
-                ],
             ]);
         }
 

src/Form/Type/DateTimePickerType.php

@@ -58,15 +58,20 @@ class DateTimePickerType extends AbstractType
             'with_seconds' => false,
             'model_timezone' => $timezone,
             'view_timezone' => $timezone,
+            'autofocus' => false,
         ]);
 
         $resolver->setDefault('attr', function (Options $options) {
-            return [
+            $values = [
                 'data-datetimepicker' => 'on',
                 'autocomplete' => 'off',
                 'placeholder' => $options['format'],
                 'data-format' => $options['format_picker'],
             ];
+            if ($options['autofocus']) {
+                $values['autofocus'] = 'autofocus';
+            }
+            return $values;
         });
     }
 

templates/embeds/modal.html.twig

@@ -1,4 +1,4 @@
-<div class="modal{% if block('modal_class') is defined %} {{ block('modal_class') }}{% endif %} fade" id="{{ block('modal_id') }}" tabindex="-1" role="dialog" aria-labelledby="{{ block('modal_id') }}_label">
+<div class="modal{% if block('modal_class') is defined %} {{ block('modal_class') }}{% endif %}" id="{{ block('modal_id') }}" tabindex="-1" role="dialog" aria-labelledby="{{ block('modal_id') }}_label">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             {% if block('modal_before') is defined %}{{ block('modal_before') }}{% endif %}