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

feat(datepicker): add 'restoreFocus' input #3539

Merged

Conversation

maxokorokov
Copy link
Member

restoreFocus input will define re-focusing strategy when closing the input datepicker.

@Input() restoreFocus: true | string | HTMLElement; // defaults to true

By default it re-focuses element focused at the moment of datepicker opening.
Otherwise accepts either selector or element reference.

Fixes #3483

@codecov-io
Copy link

codecov-io commented Jan 9, 2020

Codecov Report

Merging #3539 into master will increase coverage by 0.05%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3539      +/-   ##
==========================================
+ Coverage   91.59%   91.65%   +0.05%     
==========================================
  Files         100      100              
  Lines        2868     2876       +8     
  Branches      527      529       +2     
==========================================
+ Hits         2627     2636       +9     
  Misses        183      183              
+ Partials       58       57       -1
Flag Coverage Δ
#e2e 56.39% <33.33%> (-0.06%) ⬇️
#unit 88.48% <100%> (+0.06%) ⬆️
Impacted Files Coverage Δ
src/datepicker/datepicker-input.ts 97.24% <100%> (+0.86%) ⬆️
src/datepicker/datepicker-input-config.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 bbd8b51...44955f0. Read the comment docs.

@peterblazejewicz
Copy link
Contributor

How one could just disable focus behaviour?

<input ngbDatepicker [restoreFocus]="false" [startDate]="{year: 2018, month: 3}"/>
<input ngbDatepicker restoreFocus="false" [startDate]="{year: 2018, month: 3}"/>

(original use-case). Would that be supported?

@maxokorokov
Copy link
Member Author

maxokorokov commented Jan 10, 2020

@peterblazejewicz this is intentional to force focus something, as focus should not be lost.

Though you can always do:

  • restoreFocus="body" → will focus document body
  • [restoreFocus]="false" or any invalid thing → will focus previously focused element

UPDATE: I'll add a more specific test case for body focusing

@maxokorokov maxokorokov force-pushed the feat/datepicker/refocus-strategy branch 2 times, most recently from 5397c7e to ca4faff Compare January 10, 2020 13:32
…t datepicker.

```ts
@input() restoreFocus: true | string | HTMLElement; // defaults to true
```

By default it re-focuses element focused at the moment of datepicker opening.
Otherwise accepts either selector or element reference.

Fixes ng-bootstrap#3483
@maxokorokov maxokorokov force-pushed the feat/datepicker/refocus-strategy branch from ca4faff to 44955f0 Compare January 10, 2020 15:57
@maxokorokov maxokorokov merged commit 31402a3 into ng-bootstrap:master Jan 10, 2020
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.

bug(datepicker): regression with #3371
4 participants