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

fix(datepicker): retain focus on navigation links #3381

Merged
merged 1 commit into from Oct 21, 2019

Conversation

peterblazejewicz
Copy link
Contributor

This fixes an issue on some clients due to browser being inconsistent on
handling focus on the button clicks. After the change the navigation
button within the datepicker will retain focus to allow subsequent
keyboard based navigation within datepicker instance.

Fixes: #2780

This is quite established problem and here is most recent article on the topic:
https://zellwk.com/blog/inconsistent-button-behavior/

Thanks!

@codecov-io
Copy link

codecov-io commented Sep 25, 2019

Codecov Report

Merging #3381 into master will increase coverage by 0.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3381      +/-   ##
==========================================
+ Coverage   91.05%   91.07%   +0.01%     
==========================================
  Files          95       95              
  Lines        2774     2778       +4     
  Branches      515      515              
==========================================
+ Hits         2526     2530       +4     
  Misses        189      189              
  Partials       59       59
Flag Coverage Δ
#e2e 55.61% <100%> (+0.06%) ⬆️
#unit 88.14% <100%> (+0.01%) ⬆️
Impacted Files Coverage Δ
src/datepicker/datepicker-navigation.ts 100% <100%> (ø) ⬆️

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 7324083...a1bd8c4. Read the comment docs.

Copy link
Member

@maxokorokov maxokorokov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this fix, @peterblazejewicz!

There is one small issue when clicking on the internal <span>.

Cheers,
Max

src/datepicker/datepicker-navigation.spec.ts Show resolved Hide resolved
src/datepicker/datepicker-navigation.ts Outdated Show resolved Hide resolved
This fixes an issue on some clients due to browser being inconsistent on
handling focus on the button clicks. After the change the navigation
button within the datepicker will retain focus to allow subsequent
keyboard based navigation within datepicker instance.

Fixes: ng-bootstrap#2780
Copy link
Member

@maxokorokov maxokorokov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks!

@maxokorokov maxokorokov merged commit 7a584ad into ng-bootstrap:master Oct 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Datepicker next/prev month arrows lose focus
4 participants