@naimibaby
Okay firstly I doubt that anything was fixed due to a bug, otherwise Yisrael or somebody else would have mentioned it on here if they read your post about it.
Plus, if I went by your logic then it should not have been working for me either when I did that test site with it on a page and on a lightbox.
The only difference being that you had cropped out the code for the highlighted repeater box so you just get a plain white background.
export function rptDropdown_itemReady($item, itemData, index) {
$item('#name').text = itemData.title;
$item('#container1').onClick(() => {
});
}
Which in all fairness is not brilliant as it be better to have a background still on the repeater list so that it is not overlapping anything else on the page or lightbox and is clear and easily viewable and readable for your user.
export function rptDropdown_itemReady($item, itemData, index) {
$item('#name').text = itemData.title;
if (index === currIndex) {
$item("#rptBox").style.backgroundColor = HL_COLOR;
} else {
$item("#rptBox").style.backgroundColor = REG_COLOR;
}
Plus, for some strange reason you took out the code below the onClick function for the container which when clicked on, it would make the
$item('#container1').onClick(() => {
$w('#input').value = itemData.title;
$w('#rptDropdown').collapse();
});
}
Now that you have done that, when you click on container within the repeater, then the list of countries that it is displaying will not collapse and they will still appear on the page itself.
I have just tested your code crops on Yisrael’s test site and I am correct, there is no background to the country list and it now does not collapse when the container inside the repeater is clicked on.
As I have already stated above, you really needed a background to that list and especially so it is distinguishable from the page or lightbox itself and makes it connected to the search input itself.
So note that with this line here - $item(‘#container1’).onClick(() => {
It is an onclick event handler function which has the event handler already written into the code so that you don’t have to use the properties panel of that element to add it yourself.
The only difference with it from normal, like the earlier one in the code for the onKeyPress event handler - $w(‘#input’).onKeyPress((event) => { - is that this container is inside a repeater and so must be done by $item and not simply by $w.
You can see more about this in the Repeater section in the Wix API Reference here, which I would suggest that you read if you are using repeaters.
Therefore, that onClick event handler function on the container is looking for something to do after the container inside the repeater is clicked, which in this case is to tell the list of countries to be collapsed and not shown anymore.
Without those other two lines of code underneath the container onClick event handler, then you don’t get the country list being collapsed and you end up with a list that appears on your screen all the time, as shown in the previous pic above.
As for your original question in your post about it saying an error with text on the element called #name.
This would be a prime example of using the ‘Layers’ button on the bottom of the toolbar, so that you can get a list of all the elements on that page and just double check that you haven’t missed anything out, or done something like put it as a user input and not a text box element.
See here about using the Layers option from within Wix Editor and you would get this on your page. Wix Editor: Using the Layers Panel | Help Center | Wix.com
Finally, with you saying that you used hidden on load instead of collapsed on load in your page, as shown in the pic back up this post and on your original post.
Then with it hidden on load, then the repeater would never appear when you type anything into the search box as there is nothing in the code telling the repeater which is hidden to be shown.
You can see it here in this pic that the repeater does expand and move everything down on the page itself, however as you have not told the repeater to be shown in your code with the .show() function, then it will still be hidden even though the repeater itself is expanding and collapsing.
Please note also, that there is a difference with the functions of show and hide compared to the functions of expand and collapse.
When you hide something on your page, you are simply hiding it from view and it is still on your page and taking up that same space on your page, so when you use show to show it again then it will just appear exactly where it is on your page regardless of if you have anything else behind it or in front of it.
When you collapse something on your page, you are collapsing it which means that it does not take up any room on your page and hence why everything moves to make room for it when you expand it again.
You can again read move about this in the Wix API Reference.
Show/Hide - HiddenMixin - Velo API Reference - Wix.com
Expand/Collapse - CollapsedMixin - Velo API Reference - Wix.com
