Show full country list in registration combobox when empty (#201)

The empty-query branch capped the list at 20 countries, so a user
focusing the field saw only the first 20 with no way to reach the rest
without typing. Return the full list on empty query (the panel already
has max-height + overflow-y:auto to scroll), and scroll the active
option into view during keyboard navigation.

Author: alexeygrigorev

courses/static/country_combobox.js

@@ -18,7 +18,7 @@
   function matchingCountries(query) {
     const normalizedQuery = normalize(query);
     if (!normalizedQuery) {
-      return countries.slice(0, 20);
+      return countries.slice();
     }
 
     const startsWith = [];
@@ -90,7 +90,11 @@
 
     activeIndex = (nextIndex + visibleCountries.length) % visibleCountries.length;
     panel.querySelectorAll(".country-combobox-option").forEach((option, index) => {
-      option.setAttribute("aria-selected", index === activeIndex ? "true" : "false");
+      const isActive = index === activeIndex;
+      option.setAttribute("aria-selected", isActive ? "true" : "false");
+      if (isActive) {
+        option.scrollIntoView({ block: "nearest" });
+      }
     });
     input.setAttribute("aria-activedescendant", "country-option-" + activeIndex);
   }