Problem with DateItem event

[lems]

SmartGWT 2.3

I have a series of DateItem on a DynamicForm and I see that the onChange and onChanged (on SmartGWTEE) event seems to triggered too many times.
Also some problem with onBlur and onFocus event.

Attached, I put my test result.

Here is a sample code that I use just to see which event got triggered for each action that I do on a DateItem.

package test.example.client;

import java.util.ArrayList;
import java.util.Date;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.DateItem;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.fields.events.BlurEvent;
import com.smartgwt.client.widgets.form.fields.events.BlurHandler;
import com.smartgwt.client.widgets.form.fields.events.ChangeEvent;
import com.smartgwt.client.widgets.form.fields.events.ChangeHandler;
import com.smartgwt.client.widgets.form.fields.events.ChangedEvent;
import com.smartgwt.client.widgets.form.fields.events.ChangedHandler;
import com.smartgwt.client.widgets.form.fields.events.ClickEvent;
import com.smartgwt.client.widgets.form.fields.events.ClickHandler;
import com.smartgwt.client.widgets.form.fields.events.FocusEvent;
import com.smartgwt.client.widgets.form.fields.events.FocusHandler;
import com.smartgwt.client.widgets.form.fields.events.IconClickEvent;
import com.smartgwt.client.widgets.form.fields.events.IconClickHandler;
import com.smartgwt.client.widgets.form.fields.events.IconKeyPressEvent;
import com.smartgwt.client.widgets.form.fields.events.IconKeyPressHandler;
import com.smartgwt.client.widgets.form.fields.events.KeyDownEvent;
import com.smartgwt.client.widgets.form.fields.events.KeyDownHandler;
import com.smartgwt.client.widgets.form.fields.events.KeyPressEvent;
import com.smartgwt.client.widgets.form.fields.events.KeyPressHandler;
import com.smartgwt.client.widgets.form.fields.events.KeyUpEvent;
import com.smartgwt.client.widgets.form.fields.events.KeyUpHandler;

public class TestDateItemEvent implements EntryPoint {

	DynamicForm testDateForm = new DynamicForm();
	
	@Override
	public void onModuleLoad() {
		// TODO Auto-generated method stub
		ArrayList<FormItem> formFields = new ArrayList<FormItem>();

		DateItem dateItem1 = new DateItem("DATE1");
		dateItem1.setAttribute("changeOnKeyPress", false);
		dateItem1.addKeyDownHandler(new KeyDownHandler() {
			@Override
			public void onKeyDown(KeyDownEvent event) {
				printMessage(event.getItem().getFieldName(), "onKeyDown");
			}
		});
		dateItem1.addKeyPressHandler(new KeyPressHandler() {
			@Override
			public void onKeyPress(KeyPressEvent event) {
				printMessage(event.getItem().getFieldName(), "onKeyPress");
			}
		});
		dateItem1.addKeyUpHandler(new KeyUpHandler() {
			@Override
			public void onKeyUp(KeyUpEvent event) {
				printMessage(event.getItem().getFieldName(), "onKeyUp");
			}
		});
		dateItem1.addIconClickHandler(new IconClickHandler() {
			@Override
			public void onIconClick(IconClickEvent event) {
				printMessage(event.getItem().getFieldName(), "onIconClick");
			}
		});
		dateItem1.addIconKeyPressHandler(new IconKeyPressHandler() {
			@Override
			public void onIconKeyPress(IconKeyPressEvent event) {
				printMessage(event.getItem().getFieldName(), "onIconKeyPress");
			}
		});
		dateItem1.addBlurHandler(new BlurHandler() {
			@Override
			public void onBlur(BlurEvent event) {
				printMessage(event.getItem().getFieldName(), "onBlur");
			}
		});
		dateItem1.addChangedHandler(new ChangedHandler() {
			@Override
			public void onChanged(ChangedEvent event) {
				printMessage(event.getItem().getFieldName(), "onChanged");
			}
		});
		dateItem1.addChangeHandler(new ChangeHandler() {
			@Override
			public void onChange(ChangeEvent event) {
				printMessage(event.getItem().getFieldName(), "onChange");
			}
		});
		dateItem1.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				printMessage(event.getItem().getFieldName(), "onClick");
			}
		});
		dateItem1.addFocusHandler(new FocusHandler() {
			@Override
			public void onFocus(FocusEvent event) {
				printMessage(event.getItem().getFieldName(), "onFocus");
			}
		});
		formFields.add(dateItem1);

		DateItem dateItem2 = new DateItem("DATE2");
		dateItem2.setAttribute("changeOnKeyPress", false);
		dateItem2.addKeyDownHandler(new KeyDownHandler() {
			@Override
			public void onKeyDown(KeyDownEvent event) {
				printMessage(event.getItem().getFieldName(), "onKeyDown");
			}
		});
		dateItem2.addKeyPressHandler(new KeyPressHandler() {
			@Override
			public void onKeyPress(KeyPressEvent event) {
				printMessage(event.getItem().getFieldName(), "onKeyPress");
			}
		});
		dateItem2.addKeyUpHandler(new KeyUpHandler() {
			@Override
			public void onKeyUp(KeyUpEvent event) {
				printMessage(event.getItem().getFieldName(), "onKeyUp");
			}
		});
		dateItem2.addIconClickHandler(new IconClickHandler() {
			@Override
			public void onIconClick(IconClickEvent event) {
				printMessage(event.getItem().getFieldName(), "onIconClick");
			}
		});
		dateItem2.addIconKeyPressHandler(new IconKeyPressHandler() {
			@Override
			public void onIconKeyPress(IconKeyPressEvent event) {
				printMessage(event.getItem().getFieldName(), "onIconKeyPress");
			}
		});
		dateItem2.addBlurHandler(new BlurHandler() {
			@Override
			public void onBlur(BlurEvent event) {
				printMessage(event.getItem().getFieldName(), "onBlur");
			}
		});
		dateItem2.addChangedHandler(new ChangedHandler() {
			@Override
			public void onChanged(ChangedEvent event) {
				printMessage(event.getItem().getFieldName(), "onChanged");
			}
		});
		dateItem2.addChangeHandler(new ChangeHandler() {
			@Override
			public void onChange(ChangeEvent event) {
				printMessage(event.getItem().getFieldName(), "onChange");
			}
		});
		dateItem2.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				printMessage(event.getItem().getFieldName(), "onClick");
			}
		});
		dateItem2.addFocusHandler(new FocusHandler() {
			@Override
			public void onFocus(FocusEvent event) {
				printMessage(event.getItem().getFieldName(), "onFocus");
			}
		});
		formFields.add(dateItem2);
		
		TextItem textItem1 = new TextItem("TEXT1");
		textItem1.addKeyDownHandler(new KeyDownHandler() {
			@Override
			public void onKeyDown(KeyDownEvent event) {
				printMessage(event.getItem().getFieldName(), "onKeyDown");
			}
		});
		textItem1.addKeyPressHandler(new KeyPressHandler() {
			@Override
			public void onKeyPress(KeyPressEvent event) {
				printMessage(event.getItem().getFieldName(), "onKeyPress");
			}
		});
		textItem1.addKeyUpHandler(new KeyUpHandler() {
			@Override
			public void onKeyUp(KeyUpEvent event) {
				printMessage(event.getItem().getFieldName(), "onKeyUp");
			}
		});
		textItem1.addIconClickHandler(new IconClickHandler() {
			@Override
			public void onIconClick(IconClickEvent event) {
				printMessage(event.getItem().getFieldName(), "onIconClick");
			}
		});
		textItem1.addIconKeyPressHandler(new IconKeyPressHandler() {
			@Override
			public void onIconKeyPress(IconKeyPressEvent event) {
				printMessage(event.getItem().getFieldName(), "onIconKeyPress");
			}
		});
		textItem1.addBlurHandler(new BlurHandler() {
			@Override
			public void onBlur(BlurEvent event) {
				printMessage(event.getItem().getFieldName(), "onBlur");
			}
		});
		textItem1.addChangedHandler(new ChangedHandler() {
			@Override
			public void onChanged(ChangedEvent event) {
				printMessage(event.getItem().getFieldName(), "onChanged");
			}
		});
		textItem1.addChangeHandler(new ChangeHandler() {
			@Override
			public void onChange(ChangeEvent event) {
				printMessage(event.getItem().getFieldName(), "onChange");
			}
		});
		textItem1.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				printMessage(event.getItem().getFieldName(), "onClick");
			}
		});
		textItem1.addFocusHandler(new FocusHandler() {
			@Override
			public void onFocus(FocusEvent event) {
				printMessage(event.getItem().getFieldName(), "onFocus");
			}
		});
		formFields.add(textItem1);

		FormItem[] formFieldsArray = new FormItem[formFields.size()];
		formFieldsArray = formFields.toArray(formFieldsArray);
		
		testDateForm.setNumCols(4);
		testDateForm.setFields(formFieldsArray);
		
		testDateForm.show();
		
	}
	
	private void printMessage(String fieldName, String eventName)
	{
		Date eventDate = new Date();
		System.out.println(fieldName + ": " + eventName + " fired " + eventDate.toString());
	}
}

[jay.l.fisher]

I'm seeing the same thing. SmartClient Version: SC_SNAPSHOT-2010-11-11/EVAL Deployment

The attached listing shows a very thorough recap. The extra onChanged event that is most problematic is the one that first when you click on the date chooser icon but before you actually select a date.

[lems]

I think that must be a bug instead of by design, because I just got a chance to test the same code using smartgwtpower and I found slightly different behaviour.

For this test I just add:
dateItem1.setUseTextField(true);
and
dateItem2.setUseTextField(true);
after each DateItem declaration.

In smartgwtpower, onChange and onChanged are not always fired when clicking on date-picker icon. But it seems that after selecting a new date value if I click on another DateItem object then the first DateItem object fires extra onChange and onChanged event.

The other strange event behaviour on DateItem:
- onFocus is not triggered when clicking on a date-picker icon.
are the same.

I attached the test result for the same code using smartgwtpower.

[Isomorphic]

We've now made a change to resolve the issue whereby DateItems fire change and changed handlers even when the value is actually unchanged.
This fix will appear in the next nightly build.

[lems]

Thanks Isomorphic, the onChange and onChanged event now work better.

I just finished testing the latest change using nighly build (2010-11-22) of:
- smartgwtee eval and
- smartgwtpower
at least I see that onChange and onChanged event now fired in the better way. They are not firing when there is a value change in a DateItem textbox, but onChange and onChanged fired when DateItem textbox lost focus.
(Anyway this is still a lot better than previous behaviour).

With DateItem there are still some extra onBlur and onFocus event that fires when a DateItem should already lost focus.
Here are the steps that I try (using the previous sample code):
- First click on Date1 date-picker icon
Event sequence:
onIconClick (Date1)
onClick (Date1)

- Change Date1 date value
Event sequence:
onChange (Date1)
onChanged (Date1)
onFocus (Date1)

- Click on Date2 date-picker icon
Event sequence:
onBlur (Date1)
onIconClick (Date2)
onClick (Date2)

- Click on "Cancel" button (on Date2 date-picker)
and here is the strange behaviour:
Date1 fire onFocus event and cursor is in Date1 textbox.

I think Date2 (textbox) should receive focus instead of Date1.

[Isomorphic]

You're seeing blur events because focus in moving internally within the field, eg, from the text input area to the date chooser popup. This is expected.

Your tests do not seem to indicate a problem with the change event not firing, in fact, it seems to be firing as expected?

[lems]

Sorry if I confused you. My previous test is not about onChange and onChanged event. It was about the extra onBlur and onFocus of the DateItem. Probably I should open another thread for that one.

For onChange and onChanged event, if date selection done by using mouse click, then everything works as expected now.
The only very minor thing is, if a user click on the textbox part of a DateItem and change the value using keyboard, then onChange and onChanged event are not firing until the textbox part lost focus (normal textbox will fire onChange and onChanged for each keystroke). But I think for a DateItem, current behaviour is good.

Thank you for solving the onChange and onChanged problem. I appreciate that.

[Isomorphic]

Yes, not firing change until the user is done with input is an intentional behavior for DateItem. With date entry, in the midst of the user's typing the value is frequently either invalid or very different from the final value that the user means to enter.

[lems]

Yes, I agree with that statement. Thank you!