Ngx-bootstrap: datepicker to close using double tab in mobile phone

[ggaggul]

I using well this ngx bootstrap. but i have some issues about datepicker.
In my mobile phone, to close datepicker, i need to double tab.
how can i close datepicker with single tap??

[valorkin]

Its know ios issue with hover
First tap - hover
Second - click
Fill be fixed
Closing as duplicate

[danitt]

if it helps anyone, you can also capture and extend the hover listener, to manually update the value or close the picker - hacky but works until a formalised solution is implemented

// component.html
<input type="text"
    class="form-control"
    #datePicker="bsDatepicker"
    (onShown)="onShowPicker($event)"
    bsDatepicker>
// component.ts
...
onShowPicker(container) {
    const dayHoverHandler = container.dayHoverHandler;
    const hoverWrapper = function($event) {
        const { cell, isHovered } = $event;
        // do whatever with hovered cell/event
        return dayHoverHandler($event);
    };
    container.dayHoverHandler = hoverWrapper;
}

[esoyke]

This was closed as a duplicate...of what issue?

[esoyke]

@danitt Thanks, I was able to resolve the mobile 'double-tap' issue by just modifying your function to set hover true, add this in place of your 'do whatever':
cell.isHovered=true;

[PeterStegnar]

Solution that worked for me is:

  public onShowPicker(event) {
        const dayHoverHandler = event.dayHoverHandler;
        const hoverWrapper = ($event) => {
            const cell = $event;
            cell.isHovered = false;
            return dayHoverHandler($event);
        };
        event.dayHoverHandler = hoverWrapper;
  }

Point here is, that cell.isHovered should be set to false, because this is the very problem, that first touch is hovered then "click" on touch devices.