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.

Sign up for GitHub

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

Jump to bottom

Input Date Picker Range steals focus from other inputs #10301

Closed
2 of 6 tasks
fnquinteros opened this issue Sep 13, 2024 · 4 comments
Closed
2 of 6 tasks

Input Date Picker Range steals focus from other inputs #10301

fnquinteros opened this issue Sep 13, 2024 · 4 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Urban Issues logged by ArcGIS Urban team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components-react Issues specific to the @esri/calcite-components-react package. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone
Milestone
2024-10-29 - Oct ...

Comments

@fnquinteros
Copy link

Check existing issues

Actual Behavior

When you click on the date picker and then directly click on any other input, the focus goes back to the date picker.

Expected Behavior

The focus should go to the element clicked and should't go back to the date picker

Reproduction Sample

https://codesandbox.io/p/devbox/dreamy-ioana-h6qh2h?file=%2Fsrc%2FApp.jsx%3A12%2C7&workspaceId=f51e3505-54ad-4d46-9b44-07aefd12f0d7

Reproduction Steps

  1. Click Date picker (opens calendar)
  2. Click another input

Reproduction Version

latest

Relevant Info

Tested on a Macbook on Chrome.

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

This is part of a new functionality we're implementing that releases in December under a feature flag for controlled user testing. This issue compromises accessibility, so it would be great to have it fixed for the upcoming release.

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Urban
@fnquinteros fnquinteros added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Sep 13, 2024
@github-actions github-actions bot added ArcGIS Urban Issues logged by ArcGIS Urban team members. calcite-components-react Issues specific to the @esri/calcite-components-react package. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone labels Sep 13, 2024
@jcfranco
Copy link
Member

#8402 might fix this. @anveshmekala

@anveshmekala
Copy link
Contributor

focus is invoked onClose here which is causing the issue.

Fixed in #8402

@anveshmekala anveshmekala added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Sep 30, 2024
@anveshmekala anveshmekala self-assigned this Oct 1, 2024
anveshmekala added a commit that referenced this issue Oct 1, 2024
@anveshmekala
add test for #10301
1abbe21
@anveshmekala anveshmekala mentioned this issue Oct 3, 2024
Merged
anveshmekala added a commit that referenced this issue Oct 23, 2024
@anveshmekala
feat(input-date-picker, date-picker): improve date picking experience (…
24d43ad 
…#8402)

**Related Issue:** #3455, #10113 

## Summary

Update `calcite-date-picker` & `calcite-input-date-picker` UI & UX.



![4D1CFC3C-8FF9-4493-9178-4DEDA0417031](https://github.com/user-attachments/assets/4b1f5a12-85df-4577-b1cd-812c22e41ef7)

### Key changes
- display two calendars for range irrespective of layout.
- No longer switches focus from day to end input when startDate is
selected initially.
- Month selection is possible via select menu
- No longer positions the date-picker component relative to endInput
when endInput is focused in range.
- Dates from previous months are not visible in range calendar.
- Divider indicator icons are removed in horizontal layout for range in
input-date-picker.
- No longer uses chevron icon which indicate the open status of
input-date-picker in startInput field.


Other issues resolved :
#6321
#6410
#10301
#10291
#10113
#10243
#10490

Blocked issues: #9167 

Wiki
https://github.com/Esri/calcite-design-system/wiki/date%E2%80%90picker-enhancement-%238402
@anveshmekala anveshmekala added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Oct 23, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned anveshmekala Oct 23, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Oct 28, 2024
@DitwanP
Copy link
Contributor

DitwanP commented Oct 31, 2024

Verified on 2.14.0-next.19

https://codesandbox.io/p/devbox/elegant-nobel-ts9qnt

@DitwanP DitwanP closed this as completed Oct 31, 2024
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Oct 31, 2024
benelan pushed a commit that referenced this issue Feb 8, 2025
@anveshmekala @benelan
feat(input-date-picker, date-picker): improve date picking experience (…
d03bfa6 
…#8402)

**Related Issue:** #3455, #10113 

## Summary

Update `calcite-date-picker` & `calcite-input-date-picker` UI & UX.



![4D1CFC3C-8FF9-4493-9178-4DEDA0417031](https://github.com/user-attachments/assets/4b1f5a12-85df-4577-b1cd-812c22e41ef7)

### Key changes
- display two calendars for range irrespective of layout.
- No longer switches focus from day to end input when startDate is
selected initially.
- Month selection is possible via select menu
- No longer positions the date-picker component relative to endInput
when endInput is focused in range.
- Dates from previous months are not visible in range calendar.
- Divider indicator icons are removed in horizontal layout for range in
input-date-picker.
- No longer uses chevron icon which indicate the open status of
input-date-picker in startInput field.


Other issues resolved :
#6321
#6410
#10301
#10291
#10113
#10243
#10490

Blocked issues: #9167 

Wiki
https://github.com/Esri/calcite-design-system/wiki/date%E2%80%90picker-enhancement-%238402
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Urban Issues logged by ArcGIS Urban team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. calcite-components-react Issues specific to the @esri/calcite-components-react package. impact - p1 - need for current milestone User set priority impact status of p1 - need for current milestone
Projects
None yet
Milestone
2024-10-29 - Oct Milestone
Development

No branches or pull requests
5 participants
@jcfranco @geospatialem @fnquinteros @DitwanP @anveshmekala