Skip to content

feat(CalendarMonth): add select prop passthrough #12391

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

Open
kmcfaul wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(CalendarMonth): add select prop passthrough #12391

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { TextInput } from '../TextInput';
import { Button } from '../Button';
import { Select, SelectList, SelectOption } from '../Select';
import { Select, SelectList, SelectOption, SelectProps } from '../Select';
import { MenuToggle, MenuToggleElement } from '../MenuToggle';
import { InputGroup, InputGroupItem } from '../InputGroup';
import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
Expand Down Expand Up @@ -81,6 +81,8 @@
onSelectToggle?: (open: boolean) => void;
/** Functions that returns if a date is valid and selectable. */
validators?: ((date: Date) => boolean)[];
/** Additional props passed to the month select component. */
monthSelectProps?: SelectProps;
Comment on lines +84 to +85
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Verify SelectProps requires toggle
rg -n --type=ts 'export interface SelectProps|toggle:\s*SelectToggleProps' packages/react-core/src/components/Select/Select.tsx

# Verify CalendarMonth typing for monthSelectProps
rg -n --type=ts 'monthSelectProps\?:\s*SelectProps|monthSelectProps\?:\s*Partial<SelectProps>' packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

Repository: patternfly/patternfly-react

Length of output: 260

monthSelectProps requires the full SelectProps interface, blocking partial passthrough use-cases

Line 85 types monthSelectProps as SelectProps, which has a required toggle property. This prevents callers from passing only specific options like popperProps, making the API ergonomically awkward for typical passthrough scenarios.

Change to Partial<SelectProps> to allow flexible prop passthrough:

Suggested fix 
-  monthSelectProps?: SelectProps;
+  monthSelectProps?: Partial<SelectProps>;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/** Additional props passed to the month select component. */
monthSelectProps?: SelectProps;
/** Additional props passed to the month select component. */
monthSelectProps?: Partial<SelectProps>;
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx` around
lines 84 - 85, The prop type for monthSelectProps is too strict (it uses
SelectProps which requires toggle); change the declaration of monthSelectProps
to use Partial<SelectProps> so callers can pass only subsets like popperProps.
Update the type on the CalendarMonth component/interface (the monthSelectProps
property) and adjust any usage sites that assume required fields (e.g., avoid
directly calling monthSelectProps.toggle without existence checks) to handle
possibly-undefined members after making it Partial.

}

const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
Expand Down Expand Up @@ -143,6 +145,7 @@
cellAriaLabel,
isDateFocused = false,
inlineProps,
monthSelectProps,
...props
}: CalendarProps) => {
const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
Expand Down Expand Up @@ -181,14 +184,14 @@
} else if (!dateProp) {
setFocusedDate(today);
}
}, [dateProp]);

Check warning on line 187 in packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'focusedDate'. Either include it or remove the dependency array

useEffect(() => {
// Calendar month should not be focused on page load
if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
focusRef.current.focus();
}
}, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);

Check warning on line 194 in packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'shouldFocus'. Either include it or remove the dependency array

const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
setFocusedDate(newDate);
Expand Down Expand Up @@ -328,6 +331,7 @@
}}
selected={monthFormatted}
popperProps={{ appendTo: 'inline' }}
{...monthSelectProps}
>
<SelectList>
{longMonths.map((longMonth, index) => (
Expand Down
Loading