select2 date custom option is not opening if clicked again

Question

$(document).ready(function() {

  ///dateee picker 
  $("#date-range-options").select2({
    placeholder: "Select",
    minimumResultsForSearch: -1,
    closeOnSelect: false,
    allowClear: false
  });

  $("#date-range-options").on('select2:open', function() {
    $("#custom-range").hide();
    $("#startdatetext").text("");
    $("#enddatetext").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
  })

  $("#date-range-options").on('select2:select', function() {
    console.log("date cal", $(this).val())
    selectedDateOpt = $(this).val();
    $("#startdatetext").text("");
    $("#enddatetext").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
    $('.selectedDateContainer').hide();
    if ($(this).val() === "custom") {
      console.log("date inside", $(this).val())
      $("#custom-range").show();
      $("#btn-block").show();
      $(".custom-range-datepick").show().addClass('flex-important');
      $(".custom-range-datepick").removeClass('hidden-important');
      $("#date-range-options").select2('close');
      $("#start-date-container").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(selectedDate) {
          startDateText = '';
          startDateText = selectedDate;
          console.log("selecteddd end", startDateText)
          $("#end-date-container").datepicker("option", "minDate", selectedDate);
          document.getElementById('startdateText').innerHTML = startDateText
          document.getElementById('startDate-text').innerHTML = startDateText
          console.log("Start Date:", startDateText);
        }
      });

      $("#end-date-container").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(selectedDate) {
          endDateText = "";
          endDateText = selectedDate;
          console.log("selecteddd end", endDateText)
          $("#start-date-container").datepicker("option", "maxDate", selectedDate);
          document.getElementById('enddateText').innerHTML = endDateText
          document.getElementById('endDate-text').innerHTML = endDateText
          console.log("Custom Range Selected:");
          console.log("End Date:", endDateText);
        }
      });
    } else {
      $('.selectedDateContainer').hide();
      $("#btn-block").hide()
      console.log("date outside", $(this).val())
      $("#custom-range").hide();
      $(".custom-range-datepick").removeClass('flex-important');
      $(".custom-range-datepick").hide().addClass('hidden-important');
      getFilterDataAward();

    }
  });
  $("#custom-range").hide();
  $("#date-range-options").val("").trigger('change');

  $("#apply-btn-date").click(function() {
    console.log("inside apply btn")
    const selectedOption = $("#date-range-options").val();
    console.log("selectedOpy", selectedOption)
    if (selectedOption === "custom") {
      $("#date-range-options").select2('close');
      $("#custom-range").hide();
      getFilterDataAward();
      $('.selectedDateContainer').show();
    } else {
      console.log("Selected Option:", selectedOption);
      $('.selectedDateContainer').hide();
    }
  });

  $("#cancel-btn-date").click(function() {
    $("#custom-range").hide();
    $("#date-range-options").val("").trigger('change');
    $("#startdateText").text("");
    $("#enddateText").text("");
    $("#date-range-options").select2('open');
    filterRequest.startDate = null;
    filterRequest.endDate = null;

  })

  $("#reset-btn-date").click(function() {
    $("#custom-range").hide();
    $("#date-range-options").val("").trigger('change');
    $("#startdateText").text("");
    $("#enddateText").text("");
    $("#startDate-text").text("");
    $("#endDate-text").text("");
    $(".selectedDateContainer").hide();
  })

});


function getFilterDataAward() {
  console.log("calls api")
}

 #custom-range {
            z-index: 99999;
            position: absolute;
            display: none;
            background-color: #fff;
            padding: 10px 2px 5px 2px;
            border: 1px solid #000;
        }

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Include Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Include Select2 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>

<div id="date-range-selector">
  <div class="drop-header-date">Date Range</div>
  <select id="date-range-options" style="width: 200px;">
    <option></option>
    <option value="week" onclick="getFilterDataAward()">Week</option>
    <option value="month" onclick="getFilterDataAward()">Month</option>
    <option value="year" onclick="getFilterDataAward()">Year</option>
    <option value="custom" onclick="getFilterDataAward()">Custom Range</option>
  </select>
  <div class="selectedDateContainer"><span class="startdate-box">Start Date<span
                        id='startDate-text'></span></span><span class="enddate-box"><span>End Date</span><span id='endDate-text'></span></span>
  </div>
  <div id="custom-range">
    <div class="custom-range-datepick">
      <div id="start-date-container" class="datepicker">
        <label for="start-date">Start Date:</label><span id="startdateText"></span>
      </div>
      <div id="end-date-container" class="datepicker">
        <label for="end-date">End Date:</label><span id="enddateText"></span>
      </div>
    </div>
    <div id="btn-block" style="margin-top: 8px; margin-bottom:5px; text-align: right; font-size: 14px;">
      <button id="reset-btn-date" style="display: inline-block;">Reset</button><button id="cancel-btn-date" style="display: inline-block;">Cancel</button><button id="apply-btn-date" style="display: inline-block;">Apply</button>
    </div>
  </div>

</div>

I am using select2 library for implementaion of date dropdown, Having the issue that if clicked on custom option again and again continously, custom date is not opening. For example if I click on custom date option for first time it opens but not for 2nd time. If i click on any other option and then again click on it. It opens up. How to fix it. I want to work it the same way no matter if i click it continuosly. Here is my working code snippet for your reference

Answer 1

As you can see in the following event listener, the "select2:select" triggers whenever a user select a new option. In your case, selecting "Custom Range" consecutively, will not trigger the event. Try to select "Custom Range", then select another one (e.g Year), then select again the "Custom Range", you will see the date modal will popup as the "select2:select" has been triggered.

$("#date-range-options").on('select2:select', function() {}

Following your codes, to address the issue, try to clearout the selected option value upon selecting "Custom Range". So whenever a user reselected the same option (Custom Range), the select2:select will be triggered as the value of the select has been previously cleared out.

if ($(this).val() === "custom") {

  // Clearing selected value
  $( this ).val( '' ); 

  console.log("date inside", $(this).val())
  $("#custom-range").show();
  $("#btn-block").show(); 

Hope this helps.