From eac028d3f77aa5473a5fcf59240635a1bca80f7d Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Mon, 14 Nov 2022 22:57:11 -0800
Subject: [PATCH] Fix for datalist against foreign key facets

Refs https://github.com/simonw/datasette/issues/1890#issuecomment-1314850524
---
 datasette/static/table.js               | 11 +++++------
 datasette/templates/_facet_results.html |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/datasette/static/table.js b/datasette/static/table.js
index 4a86c828..51e901a5 100644
--- 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
index d0cbcf77..034e9678 100644
--- 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 %}