pstanoev / simple-svelte-autocomplete

Simple Autocomplete / typeahead component for Svelte
http://simple-svelte-autocomplete.surge.sh/
MIT License
464 stars 78 forks source link

valueFunction gets triggered only on enter? not on select? #203

Open baradhili opened 1 year ago

baradhili commented 1 year ago

Maybe I've missed a setting, but I am finding that valueFunction only gets called when the user selects an item from the list and hit "enter". This seems weird from a UI point of view as I would expect an item to be "selected" when I click on it..

I also notice that when I hit "enter" the valueFunction seems to be called twice?

baradhili commented 1 year ago

here is the output from debug - snipped in the middle for brevity

The last bit suggests that the problem is that when I click on an item, Autcomplete thinks I've blurred the control by clicking outside

open SimpleAutocomplete.svelte:927:14
onInputClick SimpleAutocomplete.svelte:818:14
resetListToAllItemsAndOpen SimpleAutocomplete.svelte:868:14
Searching user entered text: 'undefined' SimpleAutocomplete.svelte:391:14
Changed user entered text 'undefined' into '' SimpleAutocomplete.svelte:401:14
User entered text is empty clear list of items SimpleAutocomplete.svelte:410:18
close SimpleAutocomplete.svelte:942:14
Autocomplete search : 2ms - timer ended SimpleAutocomplete.svelte:420:18
open SimpleAutocomplete.svelte:927:14
onDocumentClick SimpleAutocomplete.svelte:730:14
onDocumentClick inside SimpleAutocomplete.svelte:734:16
highlight SimpleAutocomplete.svelte:677:14
Seaching DOM element: .selected in [object HTMLDivElement] SimpleAutocomplete.svelte:682:14
Selected item not found to scroll into view client.js:1956:15
onDocumentClick SimpleAutocomplete.svelte:730:14
onDocumentClick outside SimpleAutocomplete.svelte:740:16
close SimpleAutocomplete.svelte:942:14
onKeyDown SimpleAutocomplete.svelte:748:14
onKeyPress SimpleAutocomplete.svelte:769:14
onInput SimpleAutocomplete.svelte:786:14
Searching user entered text: 'h'
.
.
.
Changed user entered text 'hell' into 'hell' SimpleAutocomplete.svelte:401:14
open SimpleAutocomplete.svelte:927:14
Prepare items to search SimpleAutocomplete.svelte:277:14
items: [{"_type":"LocalBusiness","geo":{"latitude":35.899,"longitude":14.5179},"address":{"streetAddress":"52/5 St Ursula Street","addressLocality":"Valletta","addressRegion":"Malta Xlokk","addressCountry":"Malta","countryIso":"MT","text":"52/5 St Ursula Street, Valletta, Malta Xlokk"},"name":"HECCAS LTD"},{"_type":"LocalBusiness","geo":{"latitude":35.9002,"longitude":14.5131},"address":{"streetAddress":"143 ARCHBISHOP STREET","addressLocality":"Valletta","addressRegion":"Malta Xlokk","addressCountry":"Malta","countryIso":"MT","text":"143 ARCHBISHOP STREET, Valletta, Malta Xlokk"},"name":"HELICONIA LIMITED"},{"_type":"LocalBusiness","geo":{"latitude":35.8974,"longitude":14.514},"address":{"streetAddress":"26, ST. URSOLA STREET,","addressLocality":"Isla","addressRegion":"South Eastern Region","addressCountry":"Malta","countryIso":"MT","text":"26, ST. URSOLA STREET,, Isla, South Eastern Region"},"name":"Heritage Apartments"},{"_type":"LocalBusiness","geo":{"latitude":35.8983,"longitude":14.5125},"address":{"streetAddress":"VALLETTA BUILDINGS,, VALLETTA BUILDINGS, 4TH FLOOR, SUITE 19, S","addressLocality":"Valletta","addressRegion":"Malta Xlokk","addressCountry":"Malta","countryIso":"MT","text":"VALLETTA BUILDINGS,, VALLETTA BUILDINGS, 4TH FLOOR, SUITE 19, S, Valletta, Malta Xlokk"},"name":"HERMES GATEWAY LIMITED"}] SimpleAutocomplete.svelte:278:14
4 items to search SimpleAutocomplete.svelte:302:14
Autocomplete prepare list : 3ms - timer ended SimpleAutocomplete.svelte:303:14
Autocomplete search : 411ms - timer ended SimpleAutocomplete.svelte:481:14
Search found 4 items SimpleAutocomplete.svelte:482:14
Prepare items to search SimpleAutocomplete.svelte:277:14
items: [{"_type":"LocalBusiness","geo":{"latitude":35.8573,"longitude":14.541},"address":{"streetAddress":"Kastellan Road, ZTN 4400 Zejtun, South Eastern Region","addressLocality":"Marsaxlokk","addressRegion":"Malta Xlokk","addressCountry":"Malta","countryIso":"MT","text":"Kastellan Road, ZTN 4400 Zejtun, South Eastern Region, Marsaxlokk, Malta Xlokk"},"name":"Hello Malta Tours"},{"_type":"LocalBusiness","geo":{"latitude":35.8824,"longitude":14.491},"address":{"streetAddress":"No 52, 3rd Floor Galleons Street","addressLocality":"Marsa","addressRegion":"Malta Xlokk","addressCountry":"Malta","countryIso":"MT","text":"No 52, 3rd Floor Galleons Street, Marsa, Malta Xlokk"},"name":"Hello Fly Ltd"},{"_type":"LocalBusiness","geo":{"latitude":35.873,"longitude":14.5162},"address":{"streetAddress":"295, ZABBAR ROAD,","addressLocality":"Fgura","addressRegion":"South Eastern Region","addressCountry":"Malta","countryIso":"MT","text":"295, ZABBAR ROAD,, Fgura, South Eastern Region"},"name":"HELLO TOURISM TRAVEL AGENCY INTERNATIONAL LIMITED"},{"_type":"Place","geo":{"latitude":63.8363,"longitude":-20.3956},"address":{"addressLocality":"Hella","addressSubregion":"Rangárþing ytra","addressRegion":"Southern Region","addressCountry":"Iceland","countryIso":"IS","text":"Hella, Southern Region","addressCountryAbbreviation":"IS"},"name":"Hella, Southern Region"}] SimpleAutocomplete.svelte:278:14
4 items to search SimpleAutocomplete.svelte:302:14
Autocomplete prepare list : 2ms - timer ended SimpleAutocomplete.svelte:303:14
Timer “Autocomplete search ” doesn’t exist. SimpleAutocomplete.svelte:481:14
Search found 4 items SimpleAutocomplete.svelte:482:14
.
.
I clicked on an item here
.
.
onBlur SimpleAutocomplete.svelte:856:14
close SimpleAutocomplete.svelte:942:14
onDocumentClick SimpleAutocomplete.svelte:730:14
onDocumentClick outside SimpleAutocomplete.svelte:740:16
close SimpleAutocomplete.svelte:942:14
onDocumentClick SimpleAutocomplete.svelte:730:14
onDocumentClick outside SimpleAutocomplete.svelte:740:16
close
aghster commented 1 year ago

I just had the same problem and think this is correlated to setting closeOnBlur to true.

Based on the source code I assume that the following happens: When an item in the autocomplete list gets clicked, the autocomplete input is blurred before the click is actually processed. Blurring the input triggers the event handler onBlurInternal which closes the autocomplete list, if closeOnBlur is true. Hence, when the click is processed, the item list is already closed so that the click does not trigger the event handler onListItemClick attached to the list item, but the event handler onDocumentClick attached to the entire document which again tries to close the already closed list. Since onListItemClick is not called, the new selection does not get processed, but is just ignored.

My "solution" was to simply not set closeOnBlur to true, since the item list seems to get closed anyway when the input loses focus.