vaadin-component-factory / autocomplete Goto Github PK

Focus/Blur events are not working.

Workaround: Use reflection to get textField private field value and set listeners on that.

Steps to reproduce:

1. Open https://incubator.app.fi/autocomplete-demo/autocomplete
2. Type in "ky"
3. Press the arrow down to select "Kylie".

The current input shows "ky" while the autocomplete text field shows "Kylie". This is confusing, since the user thinks that the "Kylie" value is applied, however the autocomplete component fired no such event and reports its value server-side as "ky".

I suggest to change this behavior to set the text field to "Kylie" only after ENTER has been pressed while the "Kylie" option is highlighted in the dropdown; that should then immediately fire the onValueChange event as well.

For some use cases empty autosuggest should show options but now it's hardcoded not to in js:

if (value.length > 0 && !this.opened) {
  this.opened = true;
} else if (value.length == 0 && this.opened) {
  this.opened = false;
}

This seems like an option that you should be able to choose.

Workaround:

autocomplete.setOptions(...);
autocomplete.getElement().executeJs("(function() { $0.opened=true; })()");

Hi there,

I added the Maven dependency for the autocomplete component to use it in my Vaadin 14 Flow application. Just after that I was not able to startup my application properly anymore. I am just getting a TypeError in my browsers console:

As you can see in the network secion of my browsers debugging tool, all required resources are loaded properly:

It seems that the TypeError is caused by something missing in the Vaadin bundle JS file.

Does anybody know a solution for this? Or may be something broken here? The sample provided by this repo works fine.

Best Regards.

Hi, i'm trying to add a sort of "debounce" behaviour to trigger the autocomplete functionality only some time after the user has stopped typing because to retrieve the autocomplete suggestion i'm calling an external service (simple wrapper around google maps geolocation api) and the default autocomplete behaviour causes that for every single letter typed a call is made to the external service leading to the application using too much resources.
The problem is that if i set the autocomplete options after the suggestion list is opened the list is not refreshed until i type another character (space). My code uses spring reactor to implement the debounce behavior (it is in groovy, i hope it is sufficiently clear):

private Autocomplete autocomplete = new Autocomplete(5)
private Flux<String> userInputs
private Map<String, GeocodingResult> tempResults
private GeocodingResult selectedAddress
...

@PostConstruct
def init() {
    userInputs = Flux.create { emitter ->
        autocomplete.addChangeListener {
            emitter.next(it.value)
        }
    }

    userInputs.sampleTimeout { Mono.delay(Duration.ofSeconds(2)) } //debounce 2 seconds after user ends typing
              .filter { it.length() > 4 } //filter only strings of 5 characters or more
              .map { googleMaps.search(it) }
              .subscribe { GeocodingResult[] results ->
                  tempResults = results.collectEntries {result -> [result.formattedAddress, result] } //map by formatted address
                  onUI {
                      autocomplete.options = tempResults.keySet().toList() //use formatted addresses as suggestion list
                  }
              }

    autocomplete.addAutocompleteValueAppliedListener {
        selectedAddress = tempResults[it.value] //store selected address for further use
    }
}


static void onUI(Component component, Command command) {
    component.UI.ifPresent{it.access(command)}
}

It almost works but when i have the suggestion list opened, change some text and wait 2 seconds the new suggestions are retrieved but they are not shown until i type something else (space, comma...)
Is there a way to force the suggestions list refresh when i set the options? Or better, is there a way to have the autocomplete field trigger autocompletion only for string over a certain length and automatically debounce suggestions retrieval?

When setting Autocomplete::setWidth("350px") only the autocomplete box increases its size. The textfield remains the default size.

Autocomplete autocomplete = new Autocomplete(20);
autocomplete.setWidth("350px");

As I see that this component is re-released with Apache 2 license. which is really great!

This commit changes the licence of this component but classes headers like Autocomplete.java still with CVALv3.

Maybe classes headers should be also changed to apache 2.0

Why was this not allowed? Instead value change is ONLY when user selects the suggestion which is bad...

Workaround: get textField private field via reflection and set correct modes/listeners...

If setValue is called with a string containing double quotes (for example, "Foo Bar" Ltd.) an exception is thrown in the browser console and the value is not set in the input box.

Doing string replacement with escaped double quotes solves the issue and is displayed correctly.

	private String escapeQuotes(String value) {
		return value.replace("\"", "\\\"");
	}

Check the image below. It comes from a LIKE search on a database deplacing spaces with %, so it outputs the following:

Ideally, the highlighted text doesn't match the input chars. It highlights the number of characters inputed starting from the left.

It seems the overlay is always shown below the input field. This causes the overlay to be off the screen when the field is shown at the bottom of the screen.
I found no option in the code to adjust the position of the overlay. It would be good if you can add this because overwise the addon is not usable for us. :(

This was already resolved in vaadin-component-factory/vcf-autocomplete#4, but I'm seeing identical behavior now after updating from Vaadin 14 to Vaadin 23.
To briefly recap, the issue is that the plugin works in dev mode, but not in production mode. In production mode, the following error occurs (when minimization is disabled, otherwise the names are slightly more obscure):

Uncaught (in promise) TypeError: theme.register is not a function
    at Object.<anonymous> (:8080/VAADIN/build/vaadin-1-8fc6aaa21d426e2ea7fe.cache.js:53861:7)
    at __webpack_require__ (vaadin-bundle-5d8d58bfdba0286fd262.cache.js:64:30)
    at Module.253 (:8080/VAADIN/build/vaadin-4-3328ac4d35c89ec36ab9.cache.js:279:24)
    at __webpack_require__ (vaadin-bundle-5d8d58bfdba0286fd262.cache.js:64:30)
    at async Flow_Flow.flowInit (vaadin-bundle-5d8d58bfdba0286fd262.cache.js:4356:17)
    at async Object.action (vaadin-bundle-5d8d58bfdba0286fd262.cache.js:4259:21)

When navigating through the stack trace, it becomes clear that this refers to line 14 in the file theme/lumo/vcf-autocomplete-styles.js (which is theme.register(theme.id);). However, the import that was formerly missing in the file is already present, so the error cause is probably similar but not identical.

I am using Vaadin 23.0.1 and VCF Autocomplete (Java version) 2.3.2. At the time of this writing, these are the latest versions available. The Vaadin build correctly resolves the client-side dependency to @vaadin-component-factory/vcf-autocomplete:1.2.8, which is also the latest available version. Any help would be greatly appreciated.

Hi
did anybody manage to migrate the Autocomplete component to LitElement, so that it can also be used with Vaadin 24?

Thanks
Klaus

The clear value button X is visible only when you type inside the AutoComplete.

There is a way to keep the button visible on condition?

When I select the value I save it in the DB, when open the page I reload the value, if the value is not null I'd like to show the clear button.

Actually if I want to clear the previously selected value I have to type something to make the X visible.

Currently when I press ESC to close the popup, the popup is closed correctly but the autocomplete field itself is not focused. Therefore I can't continue typing into the field without having to touch the mouse and clicking on the autocomplete component itself.

We recently updated to 14.9.2, and seeing the following error when an autocomplete is being instantiated.

2022-12-20T09:20:24.465Z java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'vcf-autocomplete' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file
	at com.vaadin.flow.component.polymertemplate.NpmTemplateParser.getTemplateContent(NpmTemplateParser.java:151)
	at com.vaadin.flow.component.polymertemplate.TemplateDataAnalyzer.parseTemplate(TemplateDataAnalyzer.java:223)
	at com.vaadin.flow.component.polymertemplate.TemplateInitializer.<init>(TemplateInitializer.java:96)
	at com.vaadin.flow.component.polymertemplate.PolymerTemplate.<init>(PolymerTemplate.java:91)
	at com.vaadin.flow.component.polymertemplate.PolymerTemplate.<init>(PolymerTemplate.java:106)
	at com.vaadin.componentfactory.Autocomplete.<init>(Autocomplete.java:66)
	at com.vaadin.componentfactory.Autocomplete.<init>(Autocomplete.java:77)

It's not a rebuild issue as far as we can see; happens through our jenkins deployments as well.

Markus from Vaadin attempted to add it to his 14.9.3 project and had the same error, suggesting that autocomplete might be currently broken/incompatible with 14.9.x.

For example, when searching for a name, it's generally useless to search when only one or two characters have been entered into the text field.

It would be good to have an option to only open the dropdown and start searching only after x (say 3) characters have been entered into the text field.

This would also solve #1 since you could just set this value to e.g. 10000 which would effectively never show a dropdown.

Thank you for developing such a useful component 👍

Sometimes I'd like to prevent the autocomplete dialog from opening, e.g. when I know upfront that the search is going to be very slow because there is insane amount of data to search from.

My first idea would be to have a setPopupEnabled() function; when called with false it would completely prevent the popup from being displayed, effectively reducing the autocomplete component to a mere text field.

After making a selection from the matches, I have called clear() in the function passed into addAutocompleteValueAppliedListener. However, this isn't clearing the text and I wondered if this was a bug?
It can be done with getElement().executeJs("this.clear()") as a workaround.