0

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

enter image description here

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 -

enter image description here

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

user9969157
  • 75
  • 4
  • 14
  • youll have to manually close it, because the `event.stopPropogation()` is stopping it from closing, consult your plugin docs , that should provide an api to manually close it – Dev Man May 22 '20 at 17:04
  • @ImmortalDude I dont understand the response. Added event.stopPropagation to prevent drop down from closing. It is working as expected. But When I interact with the calender, the drop down closes. I dont want that. I want it to stay open till I click on OK. – user9969157 May 22 '20 at 17:08
  • hmm well is the calendar dom is loaded into the dom tree or is it an absolutely positioned element that "appears" to be in the same dom tree. – Dev Man May 22 '20 at 17:13
  • @ImmortalDude that is a good question.. just checked it has absolute positioning .. style for calender popup - width: 200px; height: 205px; outline: none; position: absolute; z-index: 2000; top: 0px; left: 0px; visibility: visible; opacity: 1; margin-top: 0px; – user9969157 May 22 '20 at 17:21
  • How can I add stopPropagation to that element? – user9969157 May 22 '20 at 17:24
  • if its not in the tree as the dropdown child then youll have to handel your dropdown open/close differently – Dev Man May 22 '20 at 19:04

0 Answers0