fixed bug on scrollToOnSetSelectedDate

[rjuevesano]

@peacechen Setting scrollToOnSetSelectedDate to false is not working on scrollable.

[peacechen]

The scroller's scrollToDate method is also called by updateWeekView. It's a general method and shouldn't be dependent on scrollToOnSetSelectedDate. The setSelectedDate() method checks for the scrollToOnSetSelectedDate flag which is the flag's purpose. https://github.com/BugiDev/react-native-calendar-strip/blob/4b6800409fe0261ce228329867dcd2845b6d9054/src/CalendarStrip.js#L326

What behavior are you trying get from it?

[rjuevesano]

So I have this configuration

<CalendarStrip
          // @ts-ignore
          ref={ref}
          scrollable={true}
          scrollerPaging={true}
          showMonth={true}
          styleWeekend={false}
          useIsoWeekday={true}
          startingDate={dates[0]}
          selectedDate={moment()}
          scrollToOnSetSelectedDate={false}
          ...
/>

I want to disabled scrollToOnSetSelectedDate. Right now, it's false but it's scrolling when selecting a date and it's not what I wanted to achieve. I fixed by adding that prop to Scroller component.

[rjuevesano]

check this... so I'm showing it by weekly. Swiping and clicking the arrows works fine but on selecting a date, it will show the date/s from other week.

i'm also calling the function when selecting a date calendarStripRef.current?.setSelectedDate(itemDate);

https://user-images.githubusercontent.com/4033035/119697031-5ff74a80-be82-11eb-8ba9-f06164edc0d6.MOV

[peacechen]

Try removing the prop

selectedDate={moment()}

That constructs a new date of today on every render. The date might be the same, but it's a different object and the prop change detection may pick it up and use it.

[rjuevesano]

Try removing the prop

selectedDate={moment()}

That constructs a new date of today on every render. The date might be the same, but it's a different object and the prop change detection may pick it up and use it.

No luck. Still the same.

[peacechen]

setSelectedDate() calls onDateSelected() which calls createDays(). That may be what triggers the the scrolling.

Note the function signature for createDays(startingDate, selectedDate). That resets the starting date back to the initial starting date stored in state. We could add an optional startingDate parameter to setSelectedDate to let you control which date it focuses. https://github.com/BugiDev/react-native-calendar-strip/blob/4b6800409fe0261ce228329867dcd2845b6d9054/src/CalendarStrip.js#L306

Would you mind testing these proposed changes -- Line 298

  onDateSelected = (selectedDate, startingDate = this.state.startingDate) => {

Line 306

        ...this.createDays(startingDate, selectedDate),

Line 323

  setSelectedDate = (date, startingDate = this.state.startingDate) => {
    let mDate = moment(date);
    this.onDateSelected(mDate, startingDate);

As you may have noticed, updating the prop startingDate should also have the effect you want without any code changes. However it may still be beneficial to add the startingDate parameter to setSelectedDate

[peacechen]

karuru6225 fixed an issue with updating the state in onDateSelected in PR #299

You might want to try it out to see if it addresses this issue too. You can use the head of this repo by pointing directly to it in package.json. Run npm install after changing it.

  "dependencies": {
    "react-native-calendar-strip": "https://github.com/BugiDev/react-native-calendar-strip",
    ...
  }

To make sure it's grabbing the current code, I recommend clearing the npm cache before re-running npm install: https://github.com/BugiDev/react-native-calendar-strip/issues/204#issuecomment-650575025

[rjuevesano]

Sorry, still not working.

[felipebelinassi]

Any update for this? I'm also trying to set the scrollToOnSetSelectedDate to false and it's not working. I tried the solution made in this PR locally and it worked fine.

[QuyenTran93]

Any update for this? I'm also trying to set the scrollToOnSetSelectedDate to false and it's not working. I tried the solution made in this PR locally and it worked fine.

if (!this.props.scrollToOnSetSelectedDate) return; I trying move this line to after if (minDate && targetDate.isBefore(minDate, "day")) {

And issue will be fix with scrollToOnSetSelectedDate={false}

[RimApp]

Any update ?