Prevent dropdown form from closing

Question

I am trying to build a form inside of a dropdown, one of the component is time range picker (using jqxwidjets library) -

I dont want the drop down to close when user is interacting with the form. So, I have stopped the event propagation on the form -

   <button class="dropdown-toggle" type="button" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false">Select</button>

     <div class="dropdown-menu">       
     <form class="px-4 py-3" (click)="changeForm()">
      <div class="form-group">           
        <div class="form-inline">

          <jqxDateTimeInput (onChange)="startDateChange($event)"
           [width]="100" [height]="20" [formatString]="'yyyy-MM-dd HH:mm'" [showTimeButton]="true">
          </jqxDateTimeInput>

          <label style="padding: 5px;">-</label>

          <jqxDateTimeInput (onChange)="endDateChange($event)"
            [width]="100" [height]="20" [formatString]="'yyyy-MM-dd HH:mm'" [showTimeButton]="true">
          </jqxDateTimeInput>

        </div>
        <div> Other Form Elements </div>
      </div>
     </form>
    </div>

Here in my changeForm I have implemented in my typescript file -

changeForm() {         
  event.stopPropagation();
}

This works to stop the drop-down from closing when I click inside form. But, when i click on the any date or time inside the calendar component (like pick a date or navigate to next month), the drop-down closes and I just see a floating component -

How can I prevent drop-drown from closing till I click on OK button on the Form?