RF 4.3 rich:autocomplete: reset filter and show entire list when user clicks dropdown button

[scarpent]

In updating RF 3 combo boxes to autocomplete, I'm running into a disconcerting behavior change.

1. With mode="client" and showButton="true", I start typing a value. Let's say it's countries and I type "Can".

2.The list filters vary nicely down to Canada.

3. I hit enter and Canada is filled in for the box.

4. Oh, wait, maybe I wanted another country. I click on the dropdown arrow and only see Canada in the list. Where did all the other countries go? "Hello? Helpdesk? I'm not seeing all the choices in the dropdown."

At least, I think this will cause a lot of confusion with our users. (Not so much for country, but we have lots of dropdowns with lots of lists that people change values for.) I've learned to backspace to get the other choices to appear, but I think this is non-intuitive.

We've already made a choice, what is the purpose of continuing to filter for that one value that is already chosen? It seems to me the dropdown button should signal a desire to reset the list. The RF3 comboBox behaves this way. The RF4 rich:select also has this new filtering behavior of the autocomplete.

I notice that when forms are freshly loaded and existing values set, *then* you can click on the dropdown arrow and see all values, with your value highlighted, and this is exactly what I'd like to see after making a choice.

Is there any way to make this happen RF 4.3.7?

Thank you!

[michpetrov]

Hi,

what you can do is empty the input on mousedown, or upgrade. We have the functionality in 4.5.1 but there's a bug that needs fixing in 4.5.2.

[scarpent]

Thank you. I'll look at that, and I'm also looking at 4.5.1.

I've been at this 3.3 -> 4.3 update for quite some time with all of the breaking changes. I think I read somewhere about an emphasis with 4.5 on stability/backwards compatibility. From this page it looks fairly straightforward:

https://github.com/richfaces/richfaces/wiki/Migration-from-RichFaces-4-to-RichFaces-4.5

And I see your blog post:

https://developer.jboss.org/people/michpetrov/blog/2014/10/02/new-in-richfaces-45-html5-based-file-upload

But I'm concerned about the fileUpload incompatibility with older browsers. I guess I'd have to look at h:inputFile as you mentioned in a comment.

Thanks again for all your recent help! I'll report back on my results. :-)

Edited with results: I'm only seeing onmousedown when I click in the input box. Is there an event that fires when the dropdown button is clicked? (And that I could use to clear the box?)

I'm open to other approaches to, short of of updating to 4.5 at this point. That fileUpload change will be a bigger thing to deal with for this application.

[scarpent]

Also, there is this:

RF4 <rich:autocomplete> - How to make the button send the ajax request?

This addresses something that has since been addressed in the component, but I'm wondering if I could write a similar override in this case. I'd just need some direction on what that would be, but I'd be fine with this kind of solution.

Thanks!

[michpetrov]

Edited with results: I'm only seeing onmousedown when I click in the input box. Is there an event that fires when the dropdown button is clicked? (And that I could use to clear the box?)

There isn't, you'd have to set it by hand, something like:

var element = $(RichFaces.$(clientId).element),
    button = element.find(".rf-sel-btn"),
    input = element.find(".rf-sel-inp");

button.on("mousedown", function() {input.val('');})

[scarpent]

Thank you. It's good to know about this, but I'm getting feedback that this might not be suitable.

I wonder about the case of a newly loaded page with values set. In that case, there isn't filtering going on until you select an item. It would be great to somehow reset to that state when the user actually does select an item.

[scarpent]

In the hopes of helping other people in a pre-4.5.2 state:

We were able to address this by modifying AutocompleteBase.js in richfaces-components-ui-4.3.7.Final.jar:

    rf.getDomElement(this.fieldId).focus();
    if (this.isVisible) {
        this.__hide(event);
    } else {
        var newItems = this.cache.getItems('', this.options.filterFunction);
        this.items = $(newItems);
        $(rf.getDomElement(this.id + 'Items')).empty().append(this.items);
        onShow.call(this, event);
    }

The first three lines of the else clause are new and cause the whole list to appear when the dropdown button is clicked. Otherwise the component filtering works the same. (This is with client mode. I haven't tried with other options.)

I had trouble building the project from source, but for this all that was needed was to unzip the jar file, replace the js, and re-jar it.