We Keep Coding

show popup with custom text before closing the page (modern browsers)

I have laravel project with react components.
There is a form on one page and I want to have a modal window displayed with "Save changes Yes/No" message, while user is closing the page.
As soon as I know this can be done in two ways:
By using Prompt from react-router package, but it seems that this won't work for me since I connect react component inside the laravel blade template, thus I don't use react-router.
By using the "beforeunload" event. Modern browsers don't support adjustable messages for the confirmation window and I need to display the adjustable message ("Save changes?").
Does anybody know another way how to track the page closing (or switching to another page) and display a popup window with custom text? Is that possible to display a custom modal window instead of the default confirmation one?

Prevent user from leaving view if there are unsaved changes without using routes in React

I have a panel that opens like a modal from right to left.
Inside the panel I have a left navigation with different options that when clicking render different components.
These components are forms and I wanna prompt the user if he navigates away from a component while having unsaved changes.
I cannot use react routes since I have no routes for these, theyre just components.
Is there a way so that I cant prevent the user from navigating away or from unmounting the component and display that popup?

If it is an input you can use onBlur
or onMouseLeave if the mouse leave the component

How to change screen reader focus to vuetify modal once it opens?

I'm implementing adjustments for accessibility on a project and I need to make it possible to navigate through the page using only the keyboard. I am experiencing a problem with modals using the vuetify's v-dialog component. When I try to change the focus of the page to the content within the modal for screen readers to announce to the user. I've tried manually focus with Javascrípt document.getElementById('id').focus() and with Vue $refs like this.$refs.dialog.focus() but no success. No error appears in the console, it just doesn't focus on the contents of the modal.
I noticed that vuetify add the role="document" property to modal div but I don't know if that is the cause:
How can I focus content within modal?

You got to wait for the dialog box transition to complete and then detect that transition completion in JavaScript followed by focussing the first element in the dialog.
For this, what you need to do is detect the end of our triggered CSS transition and focus back the first element inside the dialog, like so:
dialog.addEventListener('transitionend', (e) => {
dialog.querySelector('input').focus(); // Assuming that there is an input field. If you wanna focus a non-input field then add tabindex=0 for that element and then focus it
});
where dialog is the v-dialog Dom element

How to force "keyboard navigation" mode when programmatically setting :focus-visible

I am working on an advanced search feature for a web project in React using the Algolia React Instant search package.
I am struggling a bit with keyboard navigation.
The search result features a long list of articles with various URLs. The list is very cumbersome to navigate only with the tab-key, so I have implemented navigation with the arrow-keys that works really great.
However, I have stumbled upon an issue I am unsure how to solve regarding focus-visible. When navigating with arrow keys a function inside the component will set focus using element.focus();
If I focus the search field with the mouse and start navigating with the arrow keys the focus-visible outline is missing. However, if I navigate to the search field with the tab key and start navigating with the arrow keys the focus-visible outline is visible.
This is according to specs, as focus() will not change to focus-visible and the last navigation was done with the mouse.
But this makes it impossible to navigate with the keys - you have no idea what element is in focus. Any idea how to force the browser into thinking that I am navigating with the keyboard when setting focus programmatically?

I ended up rethinking my styling and using a focus style.
But the behavior in Chrome is really weird.
If I set a style like focus:not(:focus-visible) it will be styled with the focus style when navigating with the mouse on focus, but not if I set focus with Element.focus() (and the focus was initially set on the active element with the mouse);
So the Chrome browser knows this was not navigated by a mouse? This makes absolutely no sense to me?

Scroll to Focused Field Cordova

My Issue
I am currently in the process of writing an application for iOS using Cordova. I have a page with a form on it like so:
When the user taps on a field, the keyboard appears as expected on iOS. However, to prevent my app from moving off the screen, I have enabled the following setting:
// Prevent the keyboard from pushing up the webview
cordova.plugins.Keyboard.disableScroll(true);
Unfortunately, this prevents a few things that are causing me issues:
When a field is focused, the screen does not scroll to that field so sometimes, the field appears behind the keyboard.
Even if I did have a solution to the above, for the elements that are at the bottom of the screen, I will not be able to scroll down far enough to bring them into view above the keyboard.
My Question(s)
Solution 1
Is there any way, in Cordova, to auto scroll to the focused field without moving the whole app off the screen?
If it is possible, then how can I handle fields that are close to the bottom and cannot be scrolled up any further into view?
Obviously, the first point can be achieved using JavaScript/jQuery and some clever logic with the keyboard_height, position() and scrollTop(). But, this then creates the issue with the second point about the input fields behind the keyboard...
Solution 2
If I apply the following code, it will fix the issue highlighted above, but it will create another issue (explained below):
// Enable the auto scroll when the keyboard is shown
cordova.plugins.Keyboard.disableScroll(false);
Is there anyway to fix my header (the 'Edit Profile' bit), to the top of the screen to ensure that part is always visible?

Use https://www.npmjs.com/package/cordova-plugin-keyboard#keyboardshrinkview and its Keyboard.shrinkView method.