Skip to content

onItemSelect not firing when itemRenderer uses custom event handlers #970

@smc0077

Description

@smc0077

Description

When using a custom itemRenderer with event handlers (onMouseEnter, onMouseLeave, onClick), the onItemSelect callback stops firing under certain conditions.

Steps to Reproduce

  1. Implement a custom itemRenderer with mouse event handlers:
itemRenderer={({ item, itemContext, getItemProps }) => {
  const props = getItemProps({
    onMouseEnter: (e) => { /* show tooltip */ },
    onMouseLeave: () => { /* hide tooltip */ },
    onClick: (e) => { /* custom click handler */ }
  });
  return <div {...props}>{itemContext.title}</div>;
}}
  1. Hover over an item (triggers onMouseEnter)
  2. Click the item while hovering
  3. The item becomes unresponsive - onItemSelect is not called
  4. Further clicks on the same item do not trigger any events

Expected Behavior

onItemSelect should fire consistently when clicking on items, regardless of custom event handlers in itemRenderer.

Actual Behavior

  • getItemProps() returns undefined for onClick after certain interactions
  • The library's internal click handler is lost when custom handlers are provided
  • Items become unclickable after the first interaction

Environment

  • react-calendar-timeline: 0.30.0-beta.3
  • React: 18.x
  • Browser: Chrome/Firefox/Safari (all affected)

Workaround

Currently using this workaround to manually handle the selection when onClick is missing:

itemRenderer={({ item, itemContext, getItemProps }) => {
  // Get original props first
  const baseProps = getItemProps();
  const originalOnClick = baseProps.onClick;
  
  // Then get props with custom handlers
  const customProps = getItemProps({
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave
  });
  
  const handleClick = (e) => {
    if (originalOnClick) {
      originalOnClick(e);
    } else {
      // Manually trigger selection logic
      // This shouldn't be necessary
    }
  };
  
  return <div {...customProps} onClick={handleClick}>{itemContext.title}</div>;
}}

Related Issues

Suggested Fix

The library should preserve the internal onClick handler even when custom event handlers are provided through getItemProps(). Perhaps merge the handlers instead of replacing them entirely.

Thank you for this great library! Happy to provide more details or test potential fixes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions