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] Multiple components with and without range can create buggy behavior #9167

Closed
2 of 6 tasks
geospatialem opened this issue Apr 22, 2024 · 6 comments
Closed
2 of 6 tasks

[Input Date Picker] Multiple components with and without range can create buggy behavior #9167

geospatialem opened this issue Apr 22, 2024 · 6 comments
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Field Apps Issues logged by ArcGIS Field Apps team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Milestone
2024-10-29 - Oct ...

Comments

@geospatialem
Copy link
Member

geospatialem commented Apr 22, 2024 •
edited
Loading

Check existing issues

Actual Behavior

When multiple input-date-pickers with, or without range are active in an app, the component's can observe a buggy behavior when interacting with the date-picker.

For instance, with range active:
picker-issue

Expected Behavior

Multiple input-date-pickers can be present in an app with no buggy behavior.

Reproduction Sample

Reproduction Steps

First sample:

  1. Open the sample
  2. Open the first input-date-picker
  3. Open the first range from the input-date-picker
  4. Open the second input-date-picker
  5. Observe the behavior
  6. The same process can be repeated with the second input-date-picker and attempting to open the first input-date-picker

Second sample:

  1. Open the sample
  2. Open the first input-date-picker
  3. Open the second input-date-0picker
  4. Observe the behavior

Reproduction Version

2.7.1

Relevant Info

  • Surfaced in feedback from a user on Fri April 19:

Dropdown bounces when going between months if you have two date pickers sitting side by side in the ui.

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

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

Esri team

Calcite (dev)
@geospatialem geospatialem added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Apr 22, 2024
@github-actions github-actions bot added impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive calcite-components Issues specific to the @esri/calcite-components package. Calcite (dev) Issues logged by Calcite developers. labels Apr 22, 2024
@geospatialem geospatialem added p - medium Issue is non core or affecting less that 60% of people using the library 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Apr 29, 2024
@geospatialem geospatialem self-assigned this Apr 29, 2024
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Apr 29, 2024
@geospatialem
Copy link
Member Author

The efforts of #3455 seem to resolve the behavior from above. Will confirm if the behavior is mitigated once the efforts of #3455 are merged - targeted for May 2024.

@nwhittaker
Copy link
Contributor

@geospatialem, I'm seeing the same bug with two non-range pickers as well. I have a repro in case you want to roll that into the testing for this one, or I can create a separate issue.

@geospatialem geospatialem changed the title [Input Date Picker] Multiple components with range can create buggy behavior [Input Date Picker] Multiple components with and without range can create buggy behavior Apr 30, 2024
@geospatialem
Copy link
Member Author

@geospatialem, I'm seeing the same bug with two non-range pickers as well. I have a repro in case you want to roll that into the testing for this one, or I can create a separate issue.

@nwhittaker Good catch - updated the context of the issue above to include range and non-range and added your Codepen sample to the above for context and verification.

@geospatialem geospatialem added the ArcGIS Field Apps Issues logged by ArcGIS Field Apps team members. label Apr 30, 2024
@anveshmekala anveshmekala mentioned this issue May 22, 2024
Merged
@DitwanP DitwanP assigned DitwanP and unassigned geospatialem May 29, 2024
@DitwanP DitwanP added the blocked This issue is blocked by another issue. label Jul 26, 2024
@DitwanP DitwanP mentioned this issue Aug 7, 2024
Closed
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 removed the blocked This issue is blocked by another issue. label Oct 23, 2024
@github-actions GitHub Actions
Copy link
Contributor

Issue #3455 has been closed, this issue is ready for re-evaluation.

cc @geospatialem,@DitwanP

@DitwanP DitwanP added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Oct 28, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Oct 28, 2024

Verified locally on dev and I think this issue has been resolved as a result of #3455 being completed.

Screen.Recording.2024-10-28.at.9.32.46.AM.mov

@DitwanP DitwanP closed this as completed Oct 28, 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 28, 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 Field Apps Issues logged by ArcGIS Field Apps team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - medium Issue is non core or affecting less that 60% of people using the library
Projects
None yet
Milestone
2024-10-29 - Oct Milestone
Development

No branches or pull requests
4 participants
@nwhittaker @geospatialem @DitwanP @anveshmekala