javascript - How to disable Mapbox's geocoder's suggestion click event

Question

As you enter a search, the geocoder returns suggestions base on your input. If you are to click one of those suggestions, that location is brought into view on the map.

I only want the map to navigate to the inputted location when the view locations button is clicked, and not when a suggestion item is clicked.

Is there a way to disable the event that occurs when a suggestion item is a click?

/* ==========================================================================
                                 Global elements
   ========================================================================== */

const locations_filter_div = document.getElementById('locations-filter-div');
const locations_service_div = document.getElementById('locations-service-div');
const service_div_with_text = document.querySelector('#locations-service-div .bridge-text');
const country_selector = document.getElementById('country-selector');
const find_locations_results_section = document.getElementById('find-a-location-result-section');
const view_all_locations_result_section = document.getElementById('view-all-locations-result-section');
const city_listings_div = document.getElementById('city-listings-div');
const state_country_listing = document.getElementById('state-country-listing');



/* ==========================================================================
                                 Geocoder - Search
   ========================================================================== */

mapboxgl.accessToken = 'pk.eyJ1IjoiZWR3YXJkc3ByZXN1bWUiLCJhIjoiY2tqbG4wcHB2MjJhbjJybXBlemtpcmd4OSJ9.HHMkDDtQe5vJ2DO77bbEHQ';

let geocoder = new MapboxGeocoder({
  accessToken: mapboxgl.accessToken,
  mapboxgl: mapboxgl,
  marker: false,
  placeholder: 'Search city, state, zip',
  types: 'country, place, region, locality, postcode',
});

let find_a_location_map = new mapboxgl.Map({
  style: 'mapbox://styles/mapbox/streets-v11',
  container: 'find-a-location-map-div',
  zoom: 10,
});


document.getElementById('geocoder-search-container').appendChild(geocoder.onAdd(find_a_location_map));

const geocoder_search_input = document.querySelector('#geocoder-search-container .mapboxgl-ctrl-geocoder--input');


geocoder_search_input.setAttribute('minlength', 2);



/* ==========================================================================
                        Toggle location region type
   ========================================================================== */

function toggle_locations_region_type(button) {

  // remove the selected class from currently selected button
  document.querySelector('.locations-region-type-btn.selected').classList.remove('selected');

  // added the selected class to the clicked button
  button.classList.add('selected');

  if (button.id == 'usa-locations-btn') {
    locations_filter_div.classList.add('show');
    country_selector.classList.remove('show');
  }

  if (button.id == 'international-locations-btn') {
    locations_filter_div.classList.remove('show');
    country_selector.classList.add('show');
  }

  if (find_locations_results_section.classList.contains('show')) find_locations_results_section.classList.remove('show');
}



/* ==========================================================================
                                Load find a location map
   ========================================================================== */

function query_location_search(search_input, zoom) {


  find_a_location_map.resize();
  geocoder.query(search_input).setFlyTo({
    animate: false
  });


  geocoder.on('result', function(e) {
    // geocoder.clear();

  });

}







/* ==========================================================================
                        Find a location trigger functions
   ========================================================================== */

function fal_view_locations(event) {

  event.preventDefault();
  const find_a_location_form = document.getElementById('find-a-location-form');
  const selected_region_type_btn = document.querySelector('.locations-region-type-btn.selected');

  let map_zoom;
  let geocoder_query = '';

  // check if international is currently selected 
  if (selected_region_type_btn.id == 'international-locations-btn') {
    country_selector.required = true;
    geocoder_search_input.required = false;

    map_zoom = 2;
    geocoder_query = country_selector.options[country_selector.selectedIndex].text;
  } else {
    geocoder_search_input.required = true;
    country_selector.required = false;

    map_zoom = 12
    geocoder_query = geocoder_search_input.value;
  }

  // check if the form is valid
  if (find_a_location_form.checkValidity()) {

    find_locations_results_section.classList.add('show');
    query_location_search(geocoder_query, map_zoom);
  }

  // report error if form invalid
  else find_a_location_form.reportValidity();

}

.inner {
  margin: 0 auto;
  max-width: 1190px
}

#new-locations-section {
  margin-top: 30px
}

#new-locations-section button {
  border: 0;
  padding: 0;
  font-size: 16px;
  cursor: pointer;
  outline-width: 0;
  background: transparent
}

#locations-query-type-nav,
#locations-region-type-nav {
  margin-bottom: 30px
}

#locations-query-type-nav .locations-query-type-btn:not(.selected),
#locations-query-type-nav .locations-region-type-btn:not(.selected),
#locations-region-type-nav .locations-query-type-btn:not(.selected),
#locations-region-type-nav .locations-region-type-btn:not(.selected) {
  color: #478bb8;
  text-decoration: underline
}

#locations-query-type-nav .locations-query-type-btn:not(.selected).selected,
#locations-query-type-nav .locations-region-type-btn:not(.selected).selected,
#locations-region-type-nav .locations-query-type-btn:not(.selected).selected,
#locations-region-type-nav .locations-region-type-btn:not(.selected).selected {
  color: #000;
  cursor: default;
  pointer-events: none;
  text-decoration: none
}

#new-locations-section .bridge-text {
  margin: 0 10px;
  display: inline-block
}

#new-locations-section #locations-service-div .bridge-text {
  margin-left: 0
}

#find-a-location-controls,
#view-all-locations-form {
  display: none
}

#find-a-location-controls.show,
#view-all-locations-form.show {
  display: block
}

#locations-region-type-nav #usa-locations-btn {
  margin-right: 15px
}

#new-locations-section #radius-selector,
#new-locations-section .services-selector,
#new-locations-section #country-selector {
  padding: 8px 12px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #ebeaea
}

#new-locations-section #locations-filter-div,
#new-locations-section #country-selector {
  display: none
}

#new-locations-section #locations-filter-div.show {
  display: inline
}

#new-locations-section #country-selector.show {
  display: inline-block
}

#new-locations-section #radius-and-search-div,
#new-locations-section #locations-service-div,
#geocoder-search-container {
  display: inline-block
}

#new-locations-section #locations-filter-div>span {
  margin-right: 5px
}

#new-locations-section #radius-and-search-div,
#new-locations-section #fal-services-selector {
  margin-bottom: 15px
}

#geocoder-search-container .mapboxgl-ctrl-geocoder {
  all: unset;
  position: relative
}

#geocoder-search-container .mapboxgl-ctrl-geocoder--input {
  height: unset;
  border-radius: 5px;
  background: #fff;
  padding: 8px 30px 8px 35px;
  border: 1px solid #ebeaea
}

#geocoder-search-container .mapboxgl-ctrl-geocoder--input:focus {
  outline: unset
}

#geocoder-search-container .mapboxgl-ctrl-geocoder--icon-search {
  top: 50%;
  width: 20px;
  height: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

#geocoder-search-container .mapboxgl-ctrl-geocoder--icon-close {
  margin: 0;
  width: 17px;
  height: 17px
}

#geocoder-search-container .mapboxgl-ctrl-geocoder--button {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

#geocoder-search-container .mapboxgl-ctrl-geocoder--icon-close:hover {
  fill: red
}

#geocoder-search-container .mapboxgl-ctrl-geocoder--icon-loading {
  margin-top: -10px
}

#geocoder-search-container .suggestions {
  top: calc(100% + 22px)
}

#new-locations-section #country-selector,
#new-locations-section .services-selector {
  margin-right: 10px
}

#new-locations-section #view-locations-btn,
#new-locations-section .mail-center-card .choose-location-btn {
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  background: #ee7021;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease
}

#new-locations-section #view-locations-btn:hover,
#new-locations-section .mail-center-card .choose-location-btn:hover {
  -webkit-filter: brightness(107%);
  filter: brightness(107%)
}

#find-a-location-result-section,
#view-all-locations-result-section {
  display: none;
  margin-top: 20px
}

#find-a-location-result-section.show,
#view-all-locations-result-section.show {
  display: -ms-grid;
  display: grid
}

#find-a-location-map-div .mapboxgl-ctrl-geocoder.mapboxgl-ctrl {
  display: none
}

@media (max-width: 767px) {
  .inner {
    width: 96%
  }
}

@media (max-width: 579px) {
  #new-locations-section #radius-and-search-div {
    margin-top: 10px
  }
}

@media (max-width: 423px) {
  #geocoder-search-container {
    width: 58%
  }
}

@media (max-width: 355px) {
  #radius-and-search-div .bridge-text {
    margin: 0 5px
  }
  #locations-filter-div #radius-selector {
    padding: 8px 6px
  }
}

@media (min-width: 768px) {
  .inner {
    width: 80%
  }
  #find-a-location-result-section.show {
    height: 700px
  }
}

@media (min-width: 1037px) {
  #geocoder-search-container {
    margin-right: 10px
  }
}


/*# sourceMappingURL=main.min.css.map */

<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css' type='text/css' />


<main class="inner">



  <!------------------------------------------------------ Section to integrate ------------------------------------------------------>

  <section id="new-locations-section">





    <div id="find-a-location-controls" class="show">

      <!------------------------------------------------------ Locations region type div ------------------------------------------------------>

      <nav id="locations-region-type-nav">

        <button id="usa-locations-btn" class="locations-region-type-btn selected" onclick="toggle_locations_region_type(this)">USA</button>

        <button id="international-locations-btn" class="locations-region-type-btn" onclick="toggle_locations_region_type(this)">International</button>

      </nav>


      <!------------------------------------------------------ locations filter form  ------------------------------------------------------>

      <form i

Answer 1

Waitting for answers