Wicket - AjaxFormComponentUpdatingBehavior and backspace

Question

I have a TextField where I have added an AjaxFormComponentUpdatingBehavior to get the current value when user write some string.

filterByObject = new TextField<String>("filterByObject", true, new PropertyModel<String>(searchParams, "objectFilter"));
AjaxFormComponentUpdatingBehavior  changeFilterBinded = new AjaxFormComponentUpdatingBehavior ("onkeyup") {
    @Override
    protected void onUpdate(AjaxRequestTarget target) {                         
        target.addComponent(componentToUpdate);
    }
};
filterByObject.add(changeFilterBinded);

When I put some chars inside textfield, onUpdate method is correctly called and my component, based on the current state of searchParams, changes correctly. Unfortunally when I use Backspace to cancel what I have inserted, the onUpdate is not called.

I tried changing event (onkeypress, onkeydown, onchange etc...) but it doesn't work. Only onChange works but I have to change focus to another component.

How can I save the day?

Solution

Is the input in the field invalid (according to setRequired or IValidators added to the field) as a result of pressing the backspace key? If it is, the onError method will be called instead of onUpdate, because user input will be invalid and therefore will not reach the ModelObject of the component with the AjaxFormComponentUpdatingBehavior.

AjaxFormComponentUpdatingBehavior  changeFilterBinded = 
  new AjaxFormComponentUpdatingBehavior ("onkeyup") {
    @Override
    protected void onUpdate(AjaxRequestTarget target) {     
        // Here the Component's model object has already been updated
        target.addComponent(componentToUpdate);
    }
    @Override
    protected void onError(AjaxRequestTarget target, RuntimeException e){
         // Here the Component's model object will remain unchanged, 
         // so that it doesn't hold invalid input
    }
};

Remember that any IFormValidator involving the ajax-ified component will not execute automatically, so you might be interested in checking the input for yourself manually before updating model objects if it's the case. You can tell AjaxFormComponentBehavior not to update model objects automatically by overriding getUpdateModel(). Then, in the onUpdate method, get the component's new input by means of getConvertedInput().

As a side note, onkeyup should be getting fired when pressing the backspace key. At least it does in this fiddle, and onchange is generally triggered on an <input type="text"> when focusing out of it.

Also, HTML5 introduces the oninput event handler, which may better suit your needs. It will get fired even when copying/pasting in the text field. See the following link for more information: Using the oninput event handler with onkeyup/onkeydown as its fallback.

Comments

[MrMime]

I tried and onError is called instead of onUpdate when pressing backspace. Sorry but I don't understand how to resolve this issue.

[Xavi López]

onError is getting called because a validator on the field you're adding the ajax behavior to is failing. For instance, if the field is required, and you delete all characters from it, it has an invalid input, so Wicket prevents it from getting to the model object. The thing is, what do you want to do in this case? If it is a search result you're updating, you might be interested in clearing the results and showing an error (use error() along with a FeedbackPanel, and also add the FeedbackPanel to the target). Notice you can also add components to the AjaxRequestTarget in onError.

[MrMime]

Thanks. It works. The purpose of field was only to dinamically update a list of email so its not necessary required. I have to stop to copy and paste component :P

[Xavi López]

Hehe :) Or take advantage of Wicket's OOP power and define generic components - Write once, run anywhere!

[Johncl]

Whats even more annoying is that since the model validation fails, the model object is not updated. For example if you have a field where you write a value and use a RangeRalidator with minimum 0, an empty string is not accepted! Hence you type "5", model is now 5, you press backspace, error - but model stays 5. Had to ditch the whole wicket ajax handling and do it in jQuery instead (was basically just taking an input field and doing a calculation that should be rendered in another label).