onkeyPress exiting input

Ask the community
,
1

I’ve put together a working code setup that runs through a repeater and filters for the text included in an input field. This is great barring for 1 quirk - after the timeout, the text input submits and you aren’t able to carry on typing. I want the focus to remain on the input even after the timeout.

The relevant code is below - I’ve tried to retain the focus on the relevant input:

export function addressSearchBox_keyPress ( event , $w ) {
if ( debounceTimer ) {
clearTimeout ( debounceTimer );
debounceTimer = undefined ;
}
debounceTimer = setTimeout (() => {
filter ( $w ( ‘#addressSearchBox’ ). value , lastFilterCity );
//logging output to console
console . log ( $w ( ‘#addressSearchBox’ ). value );
//attempting to refocus to the addressSearchBox
$w ( “#addressSearchBox” ). focus ();
}, 800 );

}

Any idea on why this wouldn’t work?

2

First of all, you’re better use searchBox_input instead searchBox_keyPress for 3 reasons:

  1. It will trigger not only on keyPress but also on mouse right click paste or voice input.

  2. You won’t need to set timeout.

  3. I don’t know how Wix processes the keyPress event under the hood, but assuming they use the HTML DOM API onkeypress method - it’s considered a depreciated method, and is no longer recommended .

Now for your question:
Running the onInput (or onKeyPrees) shouldn’t make it lose focus. If it loses focus there’s probably a problem that is not related to the code you posted here (and you don’t need the element.focus() line).
Maybe you have other code that caused the issue or maybe you connected the input element to a dataset.

3

Hi! So I’ve had a look at this code and updated the onkeypress based on the deprecation you mentioned, however I still get the same behaviour and after triple checking I don’t see anything that could cause this weird behaviour?

I also have a google map linked to the repeater displaying the result of the repeater - not sure if this could maybe be affecting the behaviour

Here is the full code - any help would be a blessing!

import wixData from “wix-data” ;

$w . onReady (() => {
loadAddresses ();
});

let lastFilterAddress ;
let lastFilterCity ;
let debounceTimer ;

export function addressSearchBox_input ( event ) {

**if**  ( debounceTimer ) { 
clearTimeout ( debounceTimer ); 
debounceTimer  =  **undefined** ;

}
debounceTimer = setTimeout (() => {
filter ( $w ( ‘#addressSearchBox’ ). value , lastFilterCity );

console . log ( $w ( '#addressSearchBox' ). value );

}, 800 );
}

export function citySearchDropdown_change_1 ( event , $w ) {

filter ( lastFilterAddress ,  $w ( '#citySearchDropdown' ). value );

}

function filter ( address , cityName ) {
if ( lastFilterAddress !== address || lastFilterCity !== cityName ) {
let newFilter = wixData . filter ();
if ( address )
newFilter = newFilter . contains ( ‘address’ , address );
if ( cityName )
newFilter = newFilter . contains ( ‘cityName’ , cityName );
$w ( ‘#dynamicDataset’ ). setFilter ( newFilter );
lastFilterAddress = address ;
lastFilterCity = cityName ;
}
}

function loadAddresses ( ) {
wixData . query ( ‘Items2’ )
. find ()
. then ( res => {
let options = [{ “value” : ‘’ , “label” : ‘All Cities’ }];
options . push (… res . items . map ( cityName => {
return { “value” : cityName , “label” : cityName };
}));
$w ( ‘#citySearchDropdown’ ). options = options ;
});

}

4

I can’t tell. Look at the console and see if there’s any error there.