added focus-lock to modals (#1567)

* added focus-lock to modals

* version bump

* version bump part 2

apps/andi/assets/css/search-modal.scss

@@ -184,7 +184,10 @@
 }
 
 .remove-selected-result {
-  font-size: 20px;
+  color: white;
+  font-size: 15px;
+  padding-left: 0px;
+  padding-right: 0px;
   &:hover {
     cursor: pointer;
     }

apps/andi/assets/js/app.js

@@ -5,6 +5,8 @@ import 'tippy.js/dist/tippy.css';
 import normalize_css from 'normalize.css'
 import scss from "../css/app.scss"
 import tippy from 'tippy.js';
+import Alpine from 'alpinejs';
+import focus from '@alpinejs/focus';
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -21,6 +23,10 @@ import "phoenix_html"
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
 
+window.Alpine = Alpine
+Alpine.plugin(focus)
+Alpine.start()
+
 let Hooks = {}
 
 Hooks.showSnackbar = {
@@ -117,5 +123,17 @@ const fileToText = (file) => new Promise((resolve, reject) => {
 
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
-let liveSocket = new LiveSocket('/live', Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket('/live', Socket, 
+    {
+        hooks: Hooks, 
+        params: {_csrf_token: csrfToken},
+        dom: {
+            onBeforeElUpdated(from, to) {
+                if (from._x_dataStack) {
+                    window.Alpine.clone(from, to)
+                }
+            }
+        }
+    }
+)
 liveSocket.connect()