Custom DayContent component blocks click events on day buttons

[dotio]

When using a custom DayContent component via the components prop in v9, click events on day buttons are not registered. The custom content renders correctly, but clicking on days does not trigger onSelect.

Environment

react-day-picker version: 9.13.0
React version: 19.x
Next.js version: 16.x
Steps to Reproduce

import { DayPicker } from 'react-day-picker';
import 'react-day-picker/style.css';

function CustomDayContent({ date }) {
  return (
    <div>
      <span>{date.getDate()}</span>
      <span style={{ fontSize: '10px' }}>$100</span>
    </div>
  );
}

function Calendar() {
  const [selected, setSelected] = useState();
  
  return (
    <DayPicker
      mode="range"
      selected={selected}
      onSelect={setSelected}
      components={{
        DayContent: CustomDayContent,
      }}
    />
  );
}

Expected Behavior

Clicking on a day should trigger onSelect and select the date, even when using a custom DayContent component.

Actual Behavior

Clicking on days does nothing. The onSelect callback is never called. If I remove the custom DayContent component, clicks work as expected.

Workaround

Currently downgraded to v8.10.1 where this works correctly with the same pattern.

Additional Context

The issue appears to be that the custom content wrapper inside DayContent is intercepting pointer events meant for the underlying element. Adding pointer-events: none to the custom wrapper div resolves the issue but feels like a workaround rather than expected behavior.

[gpbl]

Thanks for the report @dotio

In v9 the DayContent component was removed, so passing components={{ DayContent: ... }} doesn’t hook into the day button anymore. The clickable area and onSelect are handled by DayButton, so if custom content sits outside that button (or overlays it), clicks won’t reach the handler. This why pointer-events: none appears to “fix” it.

Recommended options in v9:

1. If you only need text: use the formatDay formatter.
2. If you need richer UI: override DayButton and render your custom content inside it while forwarding all props (important).

Example:

import { DayButton, type DayButtonProps, DayPicker } from "react-day-picker";

function CustomDayButton(props: DayButtonProps) {
  const { day, modifiers, ...buttonProps } = props;
  return (
    <DayButton day={day} modifiers={modifiers} {...buttonProps}>
      <div>
        <span>{day.date.getDate()}</span>
        <span style={{ fontSize: "10px" }}>$100</span>
      </div>
    </DayButton>
  );
}

<DayPicker components={{ DayButton: CustomDayButton }} />

This keeps the built-in click handlers and accessibility intact. Please give a look to the upgrade guide and custom components guide.