widgetset updateVariable timing of a button

Vaadin 6 / 7 / 8 Framework UI
1

I’m not sure if this is a bug in my code, but I’m building my first Vaadin 6.3 widgetset for CKEditor integration

CKEditor has a blur event combined with ‘checkDirty’ that I can use to trigger a call to client.updateVariable() with the new data. This seems to work well.

However, in my sample app, I have a dummy button that probably is immediate by default, while the CKEditor is not immediate. The idea is that when I leave the CKEditor and clicked on the button, the blur event would take place, queue up the changed data, and the button event would cause it all to be sent.

But I find sometimes that the button event takes place and my data doesn’t go with it, even though I have called the updateVariable() to queue it up.

I figure the button event is firing faster than the blur event + updateVariable on occasion since the next button click does send the queued up changes.

If I make the CKEditor immediate, I don’t seem to be able to have the timing issue, but then I send the updates even if I just go to another field without clicking on the button.

When CKEditor is not immediate, if I click outside and click the button, it also is always sent, which is why it seems like a timing issue – if I blur it before clicking the button, the changes are always sent out with the button.

Is there something here I should be concerned about so that I can ensure that when a user clicks a button (like in a Form), the data changes in my editor(s) can be assured to go at that time? I’d prefer not to force it to be immediate all the time since users may be making various changes on a Form and I don’t need to send it to the server until they click a button to take action.

Thanks for any tips!

2

In which browser(s) are you experiencing this? I remember Safari had some issues with button focus/blur event delegation, sounds a bit similar. And are you using a normal Button or the NativeButton component?

3

The code comes from a simple demo app in the CKEditor for Vaadin component (just added to the directory).

Basically the entire app is just:

Window mainWindow = new Window("Vaadin CkEditor Application", new CssLayout());
setMainWindow(mainWindow);
		
mainWindow.addComponent(new Button("Hit server"));

CKEditorTextField ckEditorTextField = new CKEditorTextField();
mainWindow.addComponent(ckEditorTextField);
		
ckEditorTextField.setValue("<p>Thanks TinyMCEEditor for getting us started on the CKEditor integration.</p><h1>Like TinyMCEEditor said, &quot;Vaadin rocks!&quot;</h1><h1>And CKEditor is no slouch either.</h1>");
		
ckEditorTextField.addListener(new Property.ValueChangeListener() {
	private static final long serialVersionUID = 54555014513845952L;

	public void valueChange(ValueChangeEvent event) {
		getMainWindow().showNotification("Content now: " + event.getProperty().toString().replaceAll("<", "&lt;"));
	}
});

I found this mostly on IE8, but it will happen on FF 3.5 as well. Chrome seemed hard to produce, but I think it happened there too.

If I make it ckEditorTextField.setImmediate(true), I can’t seem to make it happen.

4

Thanks to Jens Jansson I was finally able to put a breakpoint in VButton.onClick where it calls client.updateVariable (always immediate), along with my VCKEditorTextField.onChange that does the same (though immediate is configurable since it’s just a textarea in effect).

In FF 3.5, I was able to show that most of the time, I’d get to my widget’s onChange before the VButton’s onClick, but not always.

CKEditor’s “blur” event is built in to CKEditor – it’s not a native browser blur event, though presumably it’s triggered by one.

Is such event timing something I have any hope of controlling so that I can get my onChange updateVariable called before the VButton’s onClick does since it will cause the data to be sent to the server?