I am trying to build a form inside of a dropdown, one of the component is time range picker. I dont want the drop down to close when use is interacting with the form. So, I have stopped the event propagation on the form –
<form class=”px-4 py-3″ (click)=”changeForm()”>
<div class=”form-group”>
<div class=”form-inline”>
<jqxDateTimeInput #startDate (onValueChanged)=”startDateChange($event)”
[width]=”100″ [height]=”20″ [formatString]=”‘yyyy-MM-dd HH:mm'” [showTimeButton]=”true”>
</jqxDateTimeInput>
<label style=”padding: 5px;”>-</label>
<jqxDateTimeInput #endDate (onChange)=”endDateChange($event)”
[width]=”100″ [height]=”20″ [formatString]=”‘yyyy-MM-dd HH:mm'” [showTimeButton]=”true”>
</jqxDateTimeInput>
</div>
<div> Other Form Elements </div>
</div>
</form>
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.