Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Trying to add "debounce" beahviour leads to inconsistent ui #12

Open
DarioArena87 opened this issue Jun 1, 2021 · 0 comments
Open

Trying to add "debounce" beahviour leads to inconsistent ui #12

DarioArena87 opened this issue Jun 1, 2021 · 0 comments

Comments

@DarioArena87
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant