jQuery UI Widgets Forums Angular Prevent dropdown form from closing

This topic contains 1 reply, has 2 voices, and was last updated by  admin 4 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • user9969157
    Participant

    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.


    admin
    Keymaster

    Hi user9969157,

    We usually handle the document events for handling clicks outside of popups so it is possible that you need to handle these, too and prevent with boolean flags.

    Hope this points you to the right direction.

    Regards,
    Peter

    jQWidgets Team
    https://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.