[Bug]: WeeklyDayPicker showing incorrect week number when navigating to different weeks

Open Beginner friendly
#36,721 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start in packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx and use the linked CodePen reproduction to inspect the collapsed WeeklyDayPicker path. Reproduce navigation across weeks and months, then verify that the displayed week number matches the selected week rather than the month's starting week. Done means full calendar behavior remains correct while the collapsed weekly view reports each week accurately.

Written by the indexing model from the issue text.

Description

Component: CalendarDayGrid Component: WeeklyDayPicker Fluent UI react (v8) Type: Bug :bug:
Package

react

Package version

8.125.6

React version

17.0.2

Environment
System:
    OS: Windows 11 10.0.26200
    CPU: (12) arm64 Snapdragon(R) X 12-core X1E80100 @ 3.40 GHz
    Memory: 30.95 GB / 63.49 GB
  Browsers:
    Edge: Chromium (151.0.4129.107)
Current Behavior

In the WeeklyDayPicker, the week numbering inaccurately reflects the current week. Instead, the week number represents the start of the week.

Expected Behavior

The WeeklyDayPicker's sub-component, CalendarGridRow, should accurately parse the week number for the given week. The bug is in https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/CalendarDayGrid/CalendarGridRow.tsx. The bug doesn't reproduce for a full calendar view, only the weekly view.

Reproduction

https://codepen.io/alorodriguez/pen/NPprpqx

Steps to reproduce
  1. Create an instance of the WeeklyDayPicker/CalendarDayGrid/CalendarGridRow component.
  2. In a collapsed state, navigate forward/backward weeks in the CalendarDayGrid.
  3. Observe that the week numbering for the collapsed single-week view of the CalendarDayGrid is incorrect. It will incorrectly show the week number associated with the start of the month. Then, when you get to the next month, it will suddenly increment by 4. In other words, sub-weeks within a month are being represented with a week number that represents only the first week of that month.
Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

Microsoft Outlook

Are you willing to submit a PR to fix?

no

Validations
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 9h
Merged PRs (30d)
43

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/fluentui

All issues in microsoft/fluentui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.