Fixed problem when usage navigation by modals

Author: tabuna

public/build/assets/app-B-hWsIbj.js renamed to public/build/assets/app-wv8uX38s.js

@@ -17,7 +17,7 @@
     "isEntry": true
   },
   "resources/js/app.js": {
-    "file": "assets/app-B-hWsIbj.js",
+    "file": "assets/app-wv8uX38s.js",
     "src": "resources/js/app.js",
     "isEntry": true,
     "css": [

public/build/manifest.json

@@ -15,3 +15,4 @@ application.register('textarea-autogrow', TextareaAutogrow);
 
 import './initializers/service-worker';
 import './initializers/yandex-metrika.js';
+import './initializers/modals.js';

resources/js/app.js

@@ -0,0 +1,49 @@
+import { Modal } from 'bootstrap';
+
+document.addEventListener('turbo:load', () => {
+    document.querySelectorAll('.modal').forEach((modal) => {
+        /**
+         * Autofocus on modal.
+         */
+        modal.addEventListener('shown.bs.modal', () => {
+            if (modal.querySelector('[autofocus]') !== null) {
+                modal.querySelector('[autofocus]').focus();
+            }
+        });
+
+        modal.addEventListener('hidden.bs.modal', () => {
+            setTimeout(() => {
+                document.activeElement?.blur();
+            });
+        });
+    });
+});
+
+document.addEventListener('turbo:before-cache', () => {
+    // Check if the body has the 'modal-open' class
+    if (document.body.classList.contains('modal-open')) {
+        if (window.location.href.indexOf('begin') > -1) {
+            return;
+        }
+
+        // Find the currently visible modal
+        const element = document.querySelector('.modal.show');
+
+        // Get or create the modal instance
+        const modal = Modal.getOrCreateInstance(element);
+
+        // Remove the 'fade' class from the modal element
+        element.classList.remove('fade');
+
+        // Disable animation for the modal backdrop
+        modal._backdrop._config.isAnimated = false;
+
+        // Hide the modal
+        modal.hide();
+
+        // Dispose the modal instance https://getbootstrap.com/docs/5.3/getting-started/javascript/#dispose-method
+        // IT hack!
+        modal.dispose();
+        element.classList.add('fade');
+    }
+});

resources/js/initializers/modals.js

@@ -125,6 +125,7 @@ class="{{ active(url($link['href']), 'active', 'link-body-emphasis') }} d-inline
                                    data-action="input->search-docs#search"
                                    name="text"
                                    autocomplete="false"
+                                   autofocus
                                    data-search-docs-target="text"
                                    type="search"
                                    placeholder="Введите термин или фразу ..."