fix select2 and dropdown width for quick-entry form (#3188)

assets/js/plugins/KimaiFormSelect.js

@@ -118,9 +118,13 @@ export default class KimaiFormSelect extends KimaiPlugin {
         options = {...options, ...{
             language: this.getConfiguration('locale').replace('_', '-'),
             theme: "bootstrap",
-            matcher: this.matcher
+            matcher: this.matcher,
+            dropdownAutoWidth: true,
+            width: "resolve"
         }};
 
+        const element = jQuery(node);
+
         if (node.dataset['renderer'] !== undefined && node.dataset['renderer'] === 'color') {
             const templateResultFunc = function (state) {
                 return jQuery('<span><span style="background-color:'+state.id+'; width: 20px; height: 20px; display: inline-block; margin-right: 10px;">&nbsp;</span>' + state.text + '</span>');
@@ -131,10 +135,20 @@ export default class KimaiFormSelect extends KimaiPlugin {
                 templateResult: templateResultFunc
             }};
 
-            jQuery(node).select2(colorOptions);
+            element.select2(colorOptions);
         } else {
-            jQuery(node).select2(options);
+            element.select2(options);
         }
+
+        // this is a bugfix for safari, which does render the dropdown only with correct width upon the second opening
+        // see https://github.com/select2/select2/issues/4678
+        element.on('select2:open', function (ev) {
+            if (element.data('performing-reopen') === undefined || element.data('performing-reopen') === null) {
+                element.data('performing-reopen', true);
+                element.select2('close');
+                element.select2('open');
+            }
+        });
     }
 
     activateSelectPicker(selector, container) {

assets/sass/forms.scss

@@ -52,4 +52,9 @@ form.form-narrow {
 .checkbox-menu li.active label:hover,
 .checkbox-menu li.active label:focus {
     background-color: #b8b8ff;
+}
+
+.duration-input {
+    min-width:50px;
+    padding: 6px;
 }

assets/sass/selectpicker.scss

@@ -20,4 +20,10 @@
 /* empty <option> were too small to be noticed as clickable element */
 .select2-container--bootstrap .select2-results__option {
     min-height: 30px;
-}
+}
+
+/* Fixes the size on quick-entry form */
+.select2-container--bootstrap {
+    display: table;
+    table-layout: fixed;
+}

public/build/entrypoints.json

@@ -3,10 +3,10 @@
     "app": {
       "js": [
         "build/runtime.b8e7bb04.js",
-        "build/app.30368b2e.js"
+        "build/app.7d469ea7.js"
       ],
       "css": [
-        "build/app.3bc2b4d9.css"
+        "build/app.7efa8299.css"
       ]
     },
     "invoice": {

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
-  "build/app.css": "build/app.3bc2b4d9.css",
-  "build/app.js": "build/app.30368b2e.js",
+  "build/app.css": "build/app.7efa8299.css",
+  "build/app.js": "build/app.7d469ea7.js",
   "build/invoice.css": "build/invoice.ff32661a.css",
   "build/invoice.js": "build/invoice.19f36eca.js",
   "build/invoice-pdf.css": "build/invoice-pdf.9a7468ef.css",

src/Constants.php

@@ -17,11 +17,11 @@ class Constants
     /**
      * The current release version
      */
-    public const VERSION = '1.18.1';
+    public const VERSION = '1.18.2';
     /**
      * The current release: major * 10000 + minor * 100 + patch
      */
-    public const VERSION_ID = 11801;
+    public const VERSION_ID = 11802;
     /**
      * The current release status, either "stable" or "dev"
      */