Clearing search is not rendering the whole list

[StellarLogic]

Clearing search is not rendering the whole list

Steps to reproduce

1. Search for any country
2. Then clear the search bar using the clear button inside search bar
3. Observe whole list is not visible as search is cleared

[dosubot]

Hello @StellarLogic! I'm a bot here to help you with bugs, questions, and contributions. Let's work together to solve the issue you're facing.

To resolve the issue where clearing the search bar does not render the whole list of items in the Countries, States, and Cities columns, you need to ensure that the filter function handles the case when the search input is empty. Here is an example of how you can modify the filter function to achieve this:

function filter(type) {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById('search-' + type);
  filter = input.value.toUpperCase();
  table = document.getElementById(type);
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1 || filter === "") {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

In this code, the condition txtValue.toUpperCase().indexOf(filter) > -1 || filter === "" ensures that if the search input is empty (filter === ""), all rows will be displayed. This should resolve the issue of not rendering the whole list of items when the search bar is cleared ^[1][2].

To continue talking to Dosu, mention @dosu.