Fix for datalist against foreign key facets

Refs #1890 (comment)
simonw · Nov 18, 2022 · b470ab5 · b470ab5
1 parent df2cc92
commit b470ab5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/datasette/static/table.js b/datasette/static/table.js
@@ -244,18 +244,17 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
     );
     Array.from(facetResults).forEach(function (facetResult) {
       // Use link text from all links in the facet result
-      var linkTexts = Array.from(
+      var links = Array.from(
         facetResult.querySelectorAll("li:not(.facet-truncated) a")
-      ).map(function (link) {
-        return link.textContent;
-      });
+      );
       // Create a datalist element
       var datalist = document.createElement("datalist");
       datalist.id = "datalist-" + facetResult.dataset.column;
       // Create an option element for each link text
-      linkTexts.forEach(function (linkText) {
+      links.forEach(function (link) {
         var option = document.createElement("option");
-        option.value = linkText;
+        option.label = link.innerText;
+        option.value = link.dataset.facetValue;
         datalist.appendChild(option);
       });
       // Add the datalist to the facet result

diff --git a/datasette/templates/_facet_results.html b/datasette/templates/_facet_results.html
@@ -12,7 +12,7 @@
             <ul class="tight-bullets">
                 {% for facet_value in facet_info.results %}
                     {% if not facet_value.selected %}
-                        <li><a href="{{ facet_value.toggle_url }}">{{ (facet_value.label | string()) or "-" }}</a> {{ "{:,}".format(facet_value.count) }}</li>
+                        <li><a href="{{ facet_value.toggle_url }}" data-facet-value="{{ facet_value.value }}">{{ (facet_value.label | string()) or "-" }}</a> {{ "{:,}".format(facet_value.count) }}</li>
                     {% else %}
                         <li>{{ facet_value.label or "-" }} &middot; {{ "{:,}".format(facet_value.count) }} <a href="{{ facet_value.toggle_url }}" class="cross">&#x2716;</a></li>
                     {% endif %}