microsoft / microsoft/fluentui
[Bug]: WeeklyDayPicker showing incorrect week number when navigating to different weeks
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 20.3k
- Forks
- 2.9k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 46
Description
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
- Create an instance of the WeeklyDayPicker/CalendarDayGrid/CalendarGridRow component.
- In a collapsed state, navigate forward/backward weeks in the CalendarDayGrid.
- 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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
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.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 82/100