Country dropdown with keyboard selection

Ask the community
,
1

@admin51915

I’m trying. to replicate this example
https://www.wix.com/corvid/forum/tips-tutorials-examples/example-repeater-dropdown-with-keyboard-navigation
It works correctly but I have the following issue:

  • if I try to select the country with the mouse, the log console shows “clicked” but does not select the country
  • once I tried with the mouse selection, it désactivate the keyboard selection and I am blocked
  • if I select “France”, it supposed to go to the URL mentioned in the database but nothing happens.

Any idea how can I select the country properly either way keyboard or mouse?

My thoughts is as follows:

  • Export function onclick is undetermined

  • Wix location API is absent from the code
    It would be very helpful if you can help me to complete the code.

Many many thanks!

import wixData from ‘wix-data’ ;
import wixLocation from ‘wix-location’ ;
let url;

const HL_COLOR = “rgba(190,190,250)” ;
const REG_COLOR = “rgba(222,222,222)” ;

let listSize;
let currIndex = - 1 ;

$w.onReady( function () {

$w( ‘#input’ ).onKeyPress((event) => {
setTimeout(() => {
if ($w( ‘#input’ ).value.length === 0 ) {
currIndex = - 1 ;
$w( “#rptDropdown” ).collapse()
.then(() => {
console.log( “Done with collapse” );
});
} else {

switch (event.key) {
case “Enter” :
$w( ‘#input’ ).value = $w( ‘#rptDropdown’ ).data[currIndex].title;
$w( “#rptDropdown” ).collapse()
.then(() => {
console.log( “Done with collapse” );
});
break ;
case “ArrowLeft” :
case “ArrowRight” :
break ;
case “ArrowUp” :
if (currIndex > 0 ) {
currIndex -= 1 ;
refresh_repeater();
}
break ;
case “ArrowDown” :
if (currIndex < listSize - 1 ) {
currIndex += 1 ;
refresh_repeater();
}
break ;
case “Escape” :
$w( ‘#input’ ).value = ‘’ ;
currIndex = - 1 ;
$w( “#rptDropdown” ).collapse()
.then(() => {
console.log( “Done with collapse” );
});
break ;
default :
currIndex = - 1 ;
wixData.query( “Countries” )
.startsWith( “title” , $w( ‘#input’ ).value)
.ascending( “title” )
.limit( 5 )
.find()
.then((res) => {
$w( ‘#rptDropdown’ ).data = ;
$w( ‘#rptDropdown’ ).data = res.items;
listSize = res.items.length;
$w( ‘#rptDropdown’ ).expand();
});
break ;
}
}
}, 50 )
});
});

export function rptDropdown_itemReady($item, itemData, index) {
$item( ‘#dataset1’ ).text = itemData.title;

if (index === currIndex) {
$item( “#rptBox” ).style.backgroundColor = HL_COLOR;
} else {
$item( “#rptBox” ).style.backgroundColor = REG_COLOR;
}

$item( '#container1' ).onClick(() => { 
    $w( '#input' ).value = itemData.title; 
    $w( '#rptDropdown' ).collapse(); 
});

}

function refresh_repeater() {
$w( “#rptDropdown” ).forEachItem(($item, itemData, index) => {
$item( ‘#dataset1’ ).text = itemData.title;

if (index === currIndex) {
$item( “#rptBox” ).style.backgroundColor = HL_COLOR;
} else {
$item( “#rptBox” ).style.backgroundColor = REG_COLOR;
}

    $item( '#container2' ).onClick(() => { 
        $w( '#input' ).value = itemData.title; 
        $w( '#rptDropdown' ).collapse(); 
    }); 
});

}

export function name_click(event) {
//Add your code for this event here:
console.log( ‘clicked’ )

}

1784×1004 60.9 KB