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’ )
}