fix sizing of geocoder in Quarto dash

Author: walkerke

R/search.R

@@ -566,6 +566,12 @@ get_geocoder_dependencies <- function() {
 #' @param limit The maximum number of results to show.  Defaults to 5.
 #' @param min_length The minimum number of characters the user must enter before results are shown.  Defaults to 2.
 #' @param language The language to use for the geocoder.  Per the Mapbox documentation, "Options are IETF language tags comprised of a mandatory ISO 639-1 language code and optionally one or more IETF subtags for country or script."
+#' @param types A vector of feature types to limit to which the search should be
+#'   limited. Available options include `'country'`, `'region'`, `'postcode'`,
+#'   `'district'`, `'place'`, `'locality'`, `'neighborhood'`, `'address'`, `'street'`, `'block'`, `'address'`. and `'secondary_address'`. If left blank, all types will be searched.
+#' @param country A character string or vector of ISO 3166 alpha-2 country codes within which you would like to limit your search.
+#' @param worldview Returns features intended for different regional or cultural groups.  The US (\code{'us'}) world view is returned by default.
+#' @param width The width of the input field. Can be specified as a number (pixels) or a valid CSS width value (e.g., "300px", "100%"). Defaults to 100%.
 #'
 #' @return A Mapbox geocoder widget as a Shiny input
 #' @export
@@ -577,8 +583,11 @@ mapboxGeocoderInput <- function(
     proximity = NULL,
     limit = 5,
     min_length = 2,
-    language = NULL
-
+    language = NULL,
+    types = NULL,
+    country = NULL,
+    worldview = NULL,
+    width = "100%"
 ) {
 
   access_token <- get_mb_access_token(access_token)
@@ -602,15 +611,41 @@ mapboxGeocoderInput <- function(
       latitude = proximity[2]
     )
   }
+  
+  if (!is.null(types)) {
+    types <- paste0(types, collapse = ",")
+  }
 
   options <- list()
 
-  options <- modifyList(options, list(proximity = proximity, placeholder = placeholder, bbox = bbox, limit = limit, minLength = min_length, language = language))
+  options <- modifyList(options, list(
+    proximity = proximity, 
+    placeholder = placeholder, 
+    bbox = bbox, 
+    limit = limit, 
+    minLength = min_length, 
+    language = language,
+    types = types,
+    countries = country,
+    worldview = worldview
+  ))
+
+  # Process width value
+  width_style <- if(is.numeric(width)) {
+    paste0(width, "px")
+  } else {
+    width
+  }
 
+  # Add width to options as well
+  options$customWidth <- width_style
+  
   div(id = inputId,
       class = "mapbox-geocoder",
+      style = paste0("width: ", width_style, ";"),
       `data-access-token` = access_token,
       `data-options` = jsonlite::toJSON(options, auto_unbox = TRUE),
+      `data-width` = width_style,
       get_geocoder_dependencies())
 }
 

inst/www/mapboxGeocoder.css

@@ -5,10 +5,9 @@
     }
 
     .mapboxgl-ctrl-geocoder {
-        width: 100%;
         font-size: 15px;
         line-height: 20px;
-        max-width: 1000px;
+        max-width: none !important; /* Override Mapbox's default max-width */
         z-index: 10010;
         position: relative; /* Ensure the parent has position for absolute children anchoring */
     }
@@ -39,6 +38,9 @@
 /* Additional fixes for container issues */
 .mapboxgl-ctrl-geocoder {
     position: relative; /* Ensure parent has position context */
+    min-width: unset !important; /* Override Mapbox's default min-width of 240px */
+    width: 100%; /* Ensure the geocoder takes the width of its container */
+    transition: none !important; /* Disable transitions that might affect width */
 }
 
 /* Ensure the container for suggestions has no overflow restrictions */

inst/www/mapboxGeocoderBinding.js

@@ -6,23 +6,48 @@ $.extend(mapboxGeocoderBinding, {
   initialize: function(el) {
     var accessToken = $(el).data("access-token");
     var options = $(el).data("options");
+    var width = $(el).data("width") || "100%";
     mapboxgl.accessToken = accessToken;
+    
+    // Clean undefined values to avoid issues
+    var cleanOptions = {};
+    for (var key in options) {
+      if (options[key] !== null && options[key] !== undefined && key !== "customWidth") {
+        cleanOptions[key] = options[key];
+      }
+    }
+    
     var geocoder = new MapboxGeocoder({
       accessToken: mapboxgl.accessToken,
       mapboxgl: mapboxgl,
-      ...options
+      ...cleanOptions
     });
+    
     geocoder.addTo(el);
+    
+    // Apply custom width to the geocoder container
+    setTimeout(function() {
+      var geocoderContainer = $(el).find('.mapboxgl-ctrl-geocoder');
+      if (geocoderContainer.length) {
+        geocoderContainer.css({
+          'min-width': 'unset',
+          'width': width
+        });
+      }
+    }, 0);
+    
     // Capture the result event and send data to Shiny
     geocoder.on('result', function(e) {
       $(el).data("geocoder-result", e.result); // Store the result in jQuery data
       $(el).trigger('change');
     });
+    
     // Add event listener for the 'clear' event
     geocoder.on('clear', function() {
       $(el).data("geocoder-result", null); // Reset the result to null
       $(el).trigger('change');
     });
+    
     $(el).data("geocoder", geocoder);
   },
   getValue: function(el) {