AutoCompleteTextField headaches

[reckart]

I have observed some issues with the AutoCompleteTextField.

The first issue is actually in Kendo itself: the AutoComplete JS assumes that every item in the auto-suggest dropdown has a different label. If multiple items have the same label, then:

• change events are not properly triggered if one selects item with label A and then a different item with label A
• when opening the dropdown again after such an action, all items with the label A appear preselected.

The second issue is with the Wicket Kendo AutoCompleteTextField itself. When used in conjunction with a AjaxFormComponentUpdatingBehavior('change'), the component suffers from the same problems as above. In particular because the component model value is then set using by locating the first choice item which has the same label as the value from the input field.

After a lot of fiddling around, I discovered that the onSelected() method actually does the right thing because it considers the index of the selected item. However, onSelected() is not called when the input field is cleared (e.g. using the clear button, or manually).

What I am now doing is this:

• listen to the Kendo filtering event and call e.sender.listView.value([]); to avoid all items with the same label appearing as selected
• listen to the Kendo select event and call e.sender.element.trigger('change') to force-trigger a change event to which the AjaxFormComponentUpdatingBehavior below can react - this overrides the select behavior of the AutoCompleteTextField which would call onSelected(), so I cannot use onSelected() anymore.
• use a AjaxFormComponentUpdatingBehavior('change') with additional dynamic attributes that send me an identifier of the item selected in the JS component
• use a custom converter which finds the right choice item based on the identifier

(I could do the last two things using an index position as the onSelected() does it, but because I only found out about that later, I don't).

I think that I would have been happy using onSelected() if it would get notifications about e.g. the user clearing the selection.

Am I missing something obvious or is it normal to have these kinds of issues?

[sebfz1]

Hi Richard, I'm not surprised the onSelected is not called when the user clears the input, for the reason that... There is no selection. Also I'm surprised there is no onChange method... I will have a deeper look at your issue, maybe I missed something in your explanation...

[reckart]

Reported the upstream part of the problem here: https://github.com/telerik/kendo-ui-core/issues/5476

[sebfz1]

Hi Richard,

Sorry for having taking so long handling this issue.

I confirm what I wrote before. onSelect is not triggered for the reason there is no selection per se. When the user clears the input, it is a "change".

So, I bound the onChange event (not enabled by default), I guess the following code will correspond to what you need:

final AutoCompleteTextField<String> autocomplete = new AutoCompleteTextField<String>("autocomplete", Model.of("Heavy metal")) {

    private static final long serialVersionUID = 1L;

    @Override
    protected List<String> getChoices(String input)
    {
        return ListUtils.startsWith(input, CHOICES);
    }

    @Override
    public boolean isChangeEventEnabled()
    {
        return true;
    }

    @Override
    public void onChange(AjaxRequestTarget target, String value)
    {
        super.onChange(target, value);

        // resets the model to null when the user clears the selection //
        if (Strings.isEmpty(value))
        {
            this.onSelected(target, null); // will set the model to null and trigger onSelected(ART)
        }
    }

    @Override
    protected void onSelected(AjaxRequestTarget target)
    {
        super.onSelected(target);

        // use the model here 
    }
};

[reckart]

Thanks :) Well, I've been living with the workaround described above ever since. Need to see when I might get back to that part of the code. So many things to do, so little time...

[sebfz1]

And for the double items issue: yes using a custom converter was the wise approach (I presume you wrapped the values in a simple pojo)...

[sebfz1]

So many things to do, so little time...

I soooo know that! :)

[reckart]

My approach is basically around here (in case you'd like to have a quick look): https://github.com/webanno/webanno/blob/6d1960080ed8c21b7486bf23e9751c0d2fd28be9/webanno-api-annotation/src/main/java/de/tudarmstadt/ukp/clarin/webanno/api/annotation/feature/editor/KendoAutoCompleteTextFeatureEditor.java#L104