How to disable "scroll to selected" when selected change? (Using range and multiple select)

[apolkingg8]

Hi, my use case is like that:

@connect((state: RootState)=> ({
    calendarType: state.calendar.type,
    startDate: state.calendar.startDate,
    endDate: state.calendar.endDate,
    selectedDates: state.calendar.selectedDates
}))
class MyComponent extends React.Component<MyComponentProps> {

    onRangeCalendarSelect = ({eventType, start, end})=> {
        if(eventType === 3) {
            // send action and change this.props.startDate & endDate
        }
    }

    onMultipleCalendarSelect = (date: Date)=> {
        // send action and change this.props.selectedDates
    }

    renderRangeCalendar = ()=> {
        return (
            <InfiniteCalendar
                Component={withRange(Calendar)}
                selected={{
                    start: this.props.startDate,
                    end: this.props.endDate,
                }}
                onSelect={this.onRangeCalendarSelect}
            />
        )
    }

    renderMultipleSelectCalendar = ()=> {
        return (
            <InfiniteCalendar
                Component={withMultipleDates(Calendar)}
                selected={this.props.selectedDates}
                interpolateSelection={defaultMultipleDateInterpolation}
                onSelect={this.onMultipleCalendarSelect}
            />
        )
    }

    renderCalendar = ()=> {

        switch(this.props.calendarType) {

            case EnumCalendarType.range:
                return this.renderRangeCalendar()

            case EnumCalendarType.multiple:
                return this.renderMultipleSelectCalendar()
        }

        return null
    }

    render() {

        return (
            <div className="myComponent">
                <div className="myComponent__main-block">
                    {this.renderCalendar()}
                </div>
            </div>
        )
    }
}

export default MyComponent

I found a issue, every time I update MyComponent, the Calendar component will re-render again (not update), and scrollTop: this.getDateOffset(this.props.scrollDate) will effect and scroll to seleted date. That's fine in range select but bad user experience in multiple select. How can I avoid this feature? I'm tried trace source code but seams no easy way to do this.

Please give me some advice or hint, thank you.

[cardamo]

Hey @apolkingg8 ! I ran into the same problem. The reason of re-render is that you create a new component on every withRange(Calendar) call. So extracting it into a constant solves the problem Like this:

const CalendarComponent = withRange(Calendar);

class MyComponent extends React.Component {
    render() {
        return (
            <InfiniteCalendar
                Component={CalendarComponent}
                selected={{
                    start: this.props.startDate,
                    end: this.props.endDate,
                }}
                onSelect={() => {/* */}}
            />
        )
    }
}