How to warn user when form changes not submitted

[jay.l.fisher]

Is there a way to detect when changes have been made to a form's contents and the user is about to navigate away (or to a different record) without submitting the changes? For example, in the Office Supply Catalog sample app, if you click on an item and make changes in the Edit tab, but forget to click Save Item, and then you click on a different item you lose your edits. Can that condition be trapped to display a warning message?

[Isomorphic]

BlurEvents would be the ones to listen for. It may be challenging to precisely detect when focus has left the form, but note the helpful Canvas.containsFocus() method.

[jay.l.fisher]

This actually seems to work, but it takes a very long time to respond when focus is changed. Resetting focus to the form works fine, but the "return" to allow things to proceed as normal doesn't quite work. The newly selected item record does not populate the form until you click on it again. ??

		itemForm.addFocusChangedHandler(new FocusChangedHandler() {
			public void onFocusChanged(FocusChangedEvent event) {
				if (!event.getHasFocus()) {
					if (itemForm.valuesHaveChanged()) {
						SC.ask("Exit without saving your changes?",
								new BooleanCallback() {
									public void execute(Boolean value) {
										if (value)
											return;
										else
											itemForm.focus();
									}
								});
					}
				}
			}
		});

[Isomorphic]

Most likely you are being called several hundred times and repeatedly showing the dialog. Realize, the dialog takes focus, so you'd need to restore focus to wherever focus had moved to after leaving the form..

[jay.l.fisher]

I gave up trying to find a solution to this but now it is being reported as a "bug" by users so I'm trying again. This time I tried adding a FocusChangedHandler as follows ...

form.addFocusChangedHandler(new FocusChangedHandler() {
	
	@Override
	public void onFocusChanged(FocusChangedEvent event) {
		if (!event.getHasFocus() && form.valuesHaveChanged()) {
			SC.ask("Do you want to cancel the pending changes?",new BooleanCallback() {
				@Override
				public void execute(Boolean value) {
					if (!value)
						form.focus();
				}					
			});
		}
	}
});

The SC.ask dialog shows up but the browser stops responding. Is there another approach to solving this. It seems like a common usability issue.

[Isomorphic]

Thanks for the sample code - we were able to reproduce this easily.
The problem is that when the focus changed handler fired and called "SC.ask" this forces focus into the ask dialog -- and by manipulating the focus in response to the focus changed event it was leading to an infinite loop.
The app would only come back to life when the thread hit some native stack-depth limit and threw an error (visible in the console, though without much useful info).

Anyway we've made some changes to the way focus / blur events are handled to fix this. So this chunk of code should work fine in the next nightly build.
If you need a workaround, you could also have your SC.ask call execute on a timer so it's in a separate thread, and the issue should go away

[jay.l.fisher]

Thanks. That code is working now with the latest nightly.

One follow up question. Is there any way to get and save the new focus target before showing the SC.ask dialog? Ideally, if they agree to lose their pending changes, I want to reset the form fields and then set the focus to where it was headed before being interrupted. Is that possible?

[Isomorphic]

You shouldn't need to do this explicitly.
When we show the ask dialog, we automatically hang onto what has focus and when you dismiss, we reset focus to it.

So this should be happening automagically. If it isn't, please let us know!

[jay.l.fisher]

Still having difficulties getting this to work. I have a row of buttons that are related to the form - Save, Delete, New, Reset. Initially these were separate from the form, just in a layout with the form. Of course the problem there was that clicking one of the buttons cause the FocusChangedHandler to fire as if you were navigating away from the form.

I've now moved those buttons into a CanvasItem and included that in form itself. However, the FocusChangedHandler still fires when I click any of the buttons and event.getHasFocus() is false. Why, when the buttons are in a CanvasItem in the form itself does it still appear that the form is losing focus?

[jay.l.fisher]

I've also tried using ButtonItem instead of IButton and including the ButtonItems in the form. But clicking the ButtonItem still fires the FocusChangedHandler and event.getHasFocus() is false. ??

[jay.l.fisher]

I finally have this working ... almost. Instead of using event.getHasFocus() I switched to using form.containsFocus() as was mentioned earlier. That fixed the problem with SC.ask dialog popping up when you clicked a button on the form. Now when I click Save the record is saved and all is well.

However, I am also using setSaveOnEnter(true) on the form so the user can press Enter instead of clicking Save. I have a SubmitValuesHandler that calls the same method as the Save button's clickHandler. I've put log messages in place and can see that the same method is being called, but the focus handling is different.

When I click the Save button the FocusChangedHandler does not fire. But when I press Enter it does, and form.containsFocus() is false. Why does the Enter key change focus away from the form? And where does the focus go?

[Isomorphic]

On focus in general, the Button is considered a distinct widget and distinct focus position regardless of whether it's incorporated into the DynamicForm for layout purposes.

You can enable the "nativeFocus" log category in the Developer Console to see how focus is moving around. This is a big verbose and technical, but it may help you understand what's going on.

The most likely place that focus is moving on submit is to the modal prompt that blocks interactivity while the submit is taking place.

[jay.l.fisher]

It sounds like using FocusChanged is not going to be a good way to solve this. Any recommendations?

The basic requirement is to warn the user if they have made changes to the form and are navigating away without saving those changes. I can't seem to come up with a way to do that.

[Isomorphic]

The basic question would be "how do they navigate away"? Focus moves for lots of different reasons. Rather than trapping focus, consider trapping either the UI elements where the user clicks to dismiss the form, or trapping the fact that the form is being hidden.