You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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
The text was updated successfully, but these errors were encountered:
@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><inputngbDatepicker(click)="..."/>
<!-- popup will be inserted here and will trigger click event on close --></label>
// vs
<labelfor="dp"></label><inputid="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:
Use container="body", it will attach the popup to the body and the <label> will not capture the click
Use (dateSelect) that is executed before the (click) + the boolean flag
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
The text was updated successfully, but these errors were encountered: