fix(module:date-picker): close date-picker after tabbing out #6571
Conversation
Codecov Report
@@ Coverage Diff @@
## master #6571 +/- ##
==========================================
+ Coverage 89.88% 89.92% +0.03%
==========================================
Files 481 481
Lines 15374 15375 +1
Branches 2343 2344 +1
==========================================
+ Hits 13819 13826 +7
+ Misses 937 929 -8
- Partials 618 620 +2
Continue to review full report at Codecov.
|
|
This fix worked out of the box for all examples on the demo page except for the 'start-end' one where you create a custom range picker. Pressing tab while in the left input would open the right picker, but wouldn't select the input itself which meant that you couldn't write your date. Since it was a custom implementation I adapted it to work with my fix. This did remove the usage of the ngOnOpenChange outputs. If this is a problem I could change it back and try to fix it another way. But I have tried doing that and it's not that obvious. Anyway I'd appreciate any input on this :) |
|
@KeelanS Should not just use |
|
@wenqi73 You mean just on the 'start-end' demo component or everywhere? Right now this component works like I would think it should work. One assumption I made was that after a 'tab', the focus would go on the other input without the picker opening. I guess this example is still OK since it still shows you can use the 'open' method and the 'nzDisabledDate' to customize your datepickers. And that was the main purpose of this example. |
| if (!this.isRange && event.key === 'Tab') { | ||
| this.close(); | ||
| } else if (this.isRange && event.key === 'Tab') { | ||
| if (this.datePickerService.activeInput === 'left' && event.shiftKey) { |
There was a problem hiding this comment.
The tab action may be changed in the future. I think this way is better:
if (!this.elementRef.nativeElement.contains(document.activeElement)) {
// ...
}There was a problem hiding this comment.
I had to check on focusEvent since at both keyDown and keyUp, the nativeElement and activeElement would be the same.
| @@ -5,6 +5,7 @@ import { NzDatePickerComponent } from 'ng-zorro-antd/date-picker'; | |||
| selector: 'nz-demo-date-picker-start-end', | |||
| template: ` | |||
| <nz-date-picker | |||
| #startDatePicker | |||
|
@KeelanS Thanks! |
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: 5844
What is the new behavior?
When tabbing out of the datepicker the picker will close.
When navigating in a range picker, the picker will only close if you go outside of the datepicker. Tabbing between the left and right side of the range picker will not close the picker.
This works both while tabbing or shift-tabbing.
Does this PR introduce a breaking change?
Other information