Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Datepicker: NgbInputDatepicker won't close on date select if <input> wrapped inside <label> #3557

Closed
kaaku opened this issue Jan 23, 2020 · 2 comments · Fixed by #3562
Closed

Comments

@kaaku
Copy link

kaaku commented Jan 23, 2020

Bug description:

In our project we have a practice of wrapping form elements inside their corresponding <label>. This seems to cause a problem with NgbInputDatepicker, where the datepicker popup won't close when a date is selected.

I guess the workaround is to not wrap the input element in the label. However, we have wrapped the datepicker in our own custom component, and having the input outside the label would force us to either i) generate an id for the input (e.g. based on the field name), or ii) require devs to pass an id attribute to the component to be able to link the input to the label. It would be great if that wasn't necessary.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-2mr78f

The first input element is wrapped inside a label, and the datepicker popup won't close when a date is selected. The second datepicker is outside the label (with the label using the for attribute to link it to the input field), and this datepicker closes when a date is selected.

We've also tried (dateSelect)="datepicker1.close()" to "force close" the popup, but this doesn't do anything; the popup stays open.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 8.2.14

ng-bootstrap: 5.2.1

Bootstrap: 4.4.1

@maxokorokov
Copy link
Member

maxokorokov commented Jan 24, 2020

@kaaku, looks like a bug to me... that's one special, but very common use case I suppose.

The problem is click capturing by the label:

<label>
  <input ngbDatepicker (click)="..."/>
  <!-- popup will be inserted here and will trigger click event on close --> 
</label>

// vs

<label for="dp">
</label>
<input id="dp" ngbDatepicker (click)="..." />
<!-- popup will be inserted here and will NOT trigger click event on close --> 

We should fix that in 5.2.2 by doing preventDefault() on click on the calendar when selecting a date


Workarounds:

  1. Use container="body", it will attach the popup to the body and the <label> will not capture the click

  2. Use (dateSelect) that is executed before the (click) + the boolean flag

See stackblitz for both → https://stackblitz.com/edit/angular-6ccjbq?file=src%2Fapp%2Fapp.component.html

P.S. I'm sure there would be some workarounds with using focus instead of click and the new [restoreFocus] input introduced in 5.2.1

@maxokorokov maxokorokov added this to the 5.2.2 milestone Jan 24, 2020
@kaaku
Copy link
Author

kaaku commented Jan 24, 2020

Thanks for the input! I tried container="body" and it solved the issue, much appreciated 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants