fix(module:date-picker): open on enter and focus on inner input #3804

jimmytheneutrino · 2019-07-16T12:05:58Z

Extracted the good parts suitable for a11y from #3146. See discussion there.

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[X] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Opening date-picker with keyboard is not possible.

Opening date-picker by a click, does not focus on the inner input element.

Issue Number: N/A

What is the new behavior?

You can open date-picker pressing enter on the keyboard when the wrapper element is selected.

Once date-picker is open, the inner input element is selected, so it is immediately possible to input date from keyboard. (Of course, this is only applicable to the cases, when there is an inner input element: e.g., month and year pickers do not have any).

Does this PR introduce a breaking change?

[ ] Yes
[X] No

Other information

netlify · 2019-07-16T12:14:41Z

Deploy preview for ng-zorro-master ready!

Built with commit 4db785f

https://deploy-preview-3804--ng-zorro-master.netlify.com

wenqi73 · 2019-07-16T13:44:12Z

components/date-picker/picker.component.ts

@@ -135,6 +139,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit {
    if (this.realOpenState) {
      this.overlayOpen = false;
      this.openChange.emit(this.overlayOpen);
+      this.focus();


Should need a test for focus.

Added 'should focus on the trigger after a click outside' tests

is this function implemented? The pop-up date box automatically captures the focus inside and can be entered by the keyboard

wenqi73 · 2019-07-16T13:47:07Z

components/date-picker/lib/popups/date-range-popup.component.html

@@ -33,6 +33,7 @@
    [locale]="locale"
    [disabledDate]="disabledDate"
    [format]="format"
+    [autoFocus]="partType != 'right'"


Suggested change

[autoFocus]="partType != 'right'"

[autoFocus]="partType !== 'right'"

wenqi73 · 2019-07-16T13:52:22Z

Thank you @jimmytheneutrino, this will close #3530.

codecov · 2019-07-16T14:36:53Z

Codecov Report

Merging #3804 into master will increase coverage by <.01%.
The diff coverage is 92.85%.

@@            Coverage Diff             @@
##           master    #3804      +/-   ##
==========================================
+ Coverage   95.39%   95.39%   +<.01%     
==========================================
  Files         712      712              
  Lines       14633    14640       +7     
  Branches     1929     1930       +1     
==========================================
+ Hits        13959    13966       +7     
  Misses        244      244              
  Partials      430      430

Impacted Files	Coverage Δ
components/date-picker/picker.component.ts	`97.89% <100%> (+0.06%)`	⬆️
...te-picker/lib/calendar/calendar-input.component.ts	`94.44% <85.71%> (+0.69%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ab8a58c...f13c5eb. Read the comment docs.

wzhudev

Two problems:

If you try to input a day, the panel would auto close when if you're done.
If you reopen the date-picker, you can press enter to confirm your selection.

These are different from the React version.

jimmytheneutrino · 2019-07-18T11:13:33Z

@wendzhue
Of these 2 problems, 2 seemed to be easy to do and quite useful, so I included a fix and a test.

However, 1 seems to be more subtle. A probable fix (which I am not really aware of) requiring an enter on changes could possibly disrupt the behavior of different components, because calendar-input is used in many places. Besides, it is not really an improvement but conformance to the react version, which is not necessarily 100% better. Lastly, it is not really that connected to the PR at hand. I think it is better to state 1 in a separate issue.

codecov · 2019-07-18T18:15:35Z

Codecov Report

Merging #3804 into master will decrease coverage by 0.01%.
The diff coverage is 92.85%.

@@            Coverage Diff             @@
##           master    #3804      +/-   ##
==========================================
- Coverage   95.25%   95.24%   -0.02%     
==========================================
  Files         726      726              
  Lines       14652    14679      +27     
  Branches     1907     1911       +4     
==========================================
+ Hits        13957    13981      +24     
- Misses        259      260       +1     
- Partials      436      438       +2

Impacted Files	Coverage Δ
components/date-picker/picker.component.ts	`97.89% <100%> (+0.06%)`	⬆️
...te-picker/lib/calendar/calendar-input.component.ts	`97.22% <85.71%> (+3.47%)`	⬆️
components/tooltip/nz-tooltip.component.ts	`88.88% <0%> (-1.59%)`	⬇️
components/tabs/nz-tabs-nav.component.ts	`89.88% <0%> (-1.08%)`	⬇️
components/slider/nz-slider-marks.component.ts	`89.74% <0%> (-0.74%)`	⬇️
components/core/time/candy-date.ts	`91.36% <0%> (-0.72%)`	⬇️
components/upload/nz-upload.component.ts	`99.28% <0%> (ø)`	⬆️
components/upload/nz-upload-btn.component.ts	`96.44% <0%> (ø)`	⬆️
components/tabs/nz-tabs.module.ts	`100% <0%> (ø)`	⬆️
components/tree-select/nz-tree-select.component.ts	`99.08% <0%> (+0.03%)`	⬆️
... and 3 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e9663a2...4db785f. Read the comment docs.

jimmytheneutrino · 2019-07-19T09:43:02Z

@wendzhue
After the fix for 2, the codecov patch check failed no matter what. So it seemed easier to try a fix for 1 that would also probably eliminate codecov issues. Fixed the tests accordingly.

wzhudev

Please rebase to the master branch.

jimmytheneutrino · 2019-07-26T13:54:49Z

It seems CI has failed with some strange 'Chromium disconnected' error. Rerun?

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

jimmytheneutrino · 2019-07-27T02:24:15Z

The test job does not seem to be able to finish. (It is ok on my local machine.)
Please see, e.g., this thread for a similar mistake: karma-runner/karma-chrome-launcher#196

…ORRO#3804) Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

pr-triage bot added the PR: unreviewed label Jul 16, 2019

jimmytheneutrino mentioned this pull request Jul 16, 2019

fix(module:date-picker): make keyboard navigation possible #3146

Closed

3 tasks

wzhudev requested a review from wenqi73 July 16, 2019 12:25

wenqi73 reviewed Jul 16, 2019

View reviewed changes

jimmytheneutrino force-pushed the fix-datepicker-autofocus-and-onenter branch from 3b0ee51 to fa40ad5 Compare July 16, 2019 15:59

wenqi73 approved these changes Jul 17, 2019

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Jul 17, 2019

wzhudev requested changes Jul 18, 2019

View reviewed changes

pr-triage bot added PR: reviewed-changes-requested and removed PR: reviewed-approved labels Jul 18, 2019

jimmytheneutrino force-pushed the fix-datepicker-autofocus-and-onenter branch from fa40ad5 to b47440a Compare July 18, 2019 10:56

pr-triage bot removed the PR: reviewed-changes-requested label Jul 18, 2019

jimmytheneutrino force-pushed the fix-datepicker-autofocus-and-onenter branch from b47440a to f13c5eb Compare July 18, 2019 16:50

jimmytheneutrino force-pushed the fix-datepicker-autofocus-and-onenter branch from f13c5eb to 8d939cf Compare July 19, 2019 09:39

vthinkxie assigned wzhudev and wenqi73 Jul 26, 2019

wzhudev reviewed Jul 26, 2019

View reviewed changes

jimmytheneutrino force-pushed the fix-datepicker-autofocus-and-onenter branch from 8d939cf to 7694ba9 Compare July 26, 2019 13:05

fix(module:date-picker): open on enter and focus on inner input

4db785f

Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

jimmytheneutrino force-pushed the fix-datepicker-autofocus-and-onenter branch from 7694ba9 to 4db785f Compare July 27, 2019 00:35

wzhudev approved these changes Aug 6, 2019

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Aug 6, 2019

wenqi73 merged commit 3f03ee1 into NG-ZORRO:master Aug 6, 2019

pr-triage bot added PR: merged and removed PR: reviewed-approved labels Aug 6, 2019

pr-triage bot added PR: reviewed-approved and removed PR: merged labels Mar 19, 2020

Ricbet pushed a commit to Ricbet/ng-zorro-antd that referenced this pull request Apr 9, 2020

fix(module:date-picker): open on enter and focus on inner input (NG-Z…

30ce6df

…ORRO#3804) Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

hsuanxyz pushed a commit to hsuanxyz/ng-zorro-antd that referenced this pull request Aug 5, 2020

fix(module:date-picker): open on enter and focus on inner input (NG-Z…

191b195

…ORRO#3804) Extracted the good parts suitable for a11y from NG-ZORRO#3146. See discussion there.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(module:date-picker): open on enter and focus on inner input #3804

fix(module:date-picker): open on enter and focus on inner input #3804

jimmytheneutrino commented Jul 16, 2019

netlify bot commented Jul 16, 2019 •

edited

Loading

wenqi73 Jul 16, 2019 •

edited

Loading

jimmytheneutrino Jul 16, 2019

haven110 Mar 19, 2020

wenqi73 Jul 16, 2019

jimmytheneutrino Jul 16, 2019

wenqi73 commented Jul 16, 2019

codecov bot commented Jul 16, 2019 •

edited

Loading

wzhudev left a comment

jimmytheneutrino commented Jul 18, 2019

codecov bot commented Jul 18, 2019 •

edited

Loading

jimmytheneutrino commented Jul 19, 2019

wzhudev left a comment

jimmytheneutrino commented Jul 26, 2019

jimmytheneutrino commented Jul 27, 2019

	[autoFocus]="partType != 'right'"
	[autoFocus]="partType !== 'right'"

fix(module:date-picker): open on enter and focus on inner input #3804

fix(module:date-picker): open on enter and focus on inner input #3804

Conversation

jimmytheneutrino commented Jul 16, 2019

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

netlify bot commented Jul 16, 2019 • edited Loading

wenqi73 Jul 16, 2019 • edited Loading

Choose a reason for hiding this comment

jimmytheneutrino Jul 16, 2019

Choose a reason for hiding this comment

haven110 Mar 19, 2020

Choose a reason for hiding this comment

wenqi73 Jul 16, 2019

Choose a reason for hiding this comment

jimmytheneutrino Jul 16, 2019

Choose a reason for hiding this comment

wenqi73 commented Jul 16, 2019

codecov bot commented Jul 16, 2019 • edited Loading

Codecov Report

wzhudev left a comment

Choose a reason for hiding this comment

jimmytheneutrino commented Jul 18, 2019

codecov bot commented Jul 18, 2019 • edited Loading

Codecov Report

jimmytheneutrino commented Jul 19, 2019

wzhudev left a comment

Choose a reason for hiding this comment

jimmytheneutrino commented Jul 26, 2019

jimmytheneutrino commented Jul 27, 2019

netlify bot commented Jul 16, 2019 •

edited

Loading

wenqi73 Jul 16, 2019 •

edited

Loading

codecov bot commented Jul 16, 2019 •

edited

Loading

codecov bot commented Jul 18, 2019 •

edited

Loading