React-dates: navNext property not working as expected

[HartiganHM]

I'm using both DatePickerSingleDateController and DayPickerRangeController in my application and am having consistent issues with the navNext property. It works _most_ of the time with DatePickerSingleDateController, but never seems to work with DayPickerRangeController. Here's the gist of what I'm experiencing:

react-dates v 16.6.1
react v 16.3.2

DayPickerRangeController Setup

<DayPickerRangeController
  startDate={startDate || null}
  endDate={endDate || null}
  onDatesChange={({ startDate, endDate }) =>
    this.setState({ startDate, endDate })
  }
  focusedInput={focusedInput || null}
  onFocusChange={focusedInput => this.setState({ focusedInput })}
  numberOfMonths={numberOfMonths || 1}
  navPrev={<NavButton fontSize={'1.5em'}>chevron_left</NavButton>}
  navNext={<NavButton fontSize={'1.5em'}>chevron_right</NavButton>}
  keepOpenOnDateSelect
  hideKeyboardShortcutsPanel
/>

The nav buttons are supposed to be blue with a white arrow. I've changed the color to red inorder to highlight the issue. After inspecting the elements, it looks like the component being passed to navPrev is wrapped in an extra parent component and has a number of styling classes from react-dates. This same behavior is not happening with navNext which (I assume) is causing the styling issues.

DayPickerSingleDateController Setup

<DayPickerSingleDateController
  date={date || null}
  placeholder={placeholder || null}
  onDateChange={date => this.handleDateChange(date)}
  focused={true}
  onFocusChange={({ focused }) => this.setState({ focused })}
  numberOfMonths={1}
  isDayBlocked={this.isDayBlocked}
  isOutsideRange={this.isOutsideRange}
  keepOpenOnDateSelect
  navPrev={<NavButton fontSize={'1.5em'}>chevron_left</NavButton>}
  navNext={<NavButton fontSize={'1.5em'}>chevron_right</NavButton>}
  hideKeyboardShortcutsPanel
/>

This shows an area where navNext is working with almost an identical setup for DayPickerSingleDateController. As you can see, both navPrev and navNext are being wrapped in the extra parent component from react-dates.

Any help is _greatly_ appreciated. If you need any additional information, please reach out!

[majapw]

Hello! I'm actually working on a PR for this RIGHT NOW. :) we'll be
removing all styling from the custom nav which will hopefully solve your
issue.

On Tue, Jun 19, 2018, 11:43 AM Hugh Hartigan [e-mail]
wrote:

I'm using both DatePickerSingleDateController and DayPickerRangeController
in my application and am having consistent issues with the navNext
property. It works most of the time with DatePickerSingleDateController,
but never seems to work with DayPickerRangeController. Here's the gist of
what I'm experiencing:

react-dates v 16.6.1
react v 16.3.2

DayPickerRangeController Setup

startDate={startDate || null}
endDate={endDate || null}
onDatesChange={({ startDate, endDate }) =>
this.setState({ startDate, endDate })
}
focusedInput={focusedInput || null}
onFocusChange={focusedInput => this.setState({ focusedInput })}
numberOfMonths={numberOfMonths || 1}
navPrev={}
navNext={}
keepOpenOnDateSelect
hideKeyboardShortcutsPanel/>

The nav buttons are supposed to be blue with a white arrow. I've changed
the color to red inorder to highlight the issue. After inspecting the
elements, it looks like the component being passed to navPrev is wrapped
in an extra parent component and has a number of styling classes from
react-dates. This same behavior is not happening with navNext which (I
assume) is causing the styling issues.

[image: screen shot 2018-06-19 at 12 30 51 pm]
https://user-images.githubusercontent.com/24458700/41617656-50100a88-73be-11e8-94f6-d78ce479f189.png

This shows an area where navNext is working with almost an identical
setup for DayPickerSingleDateController. As you can see, both navPrev
and navNext are being wrapped in the extra parent component from
react-dates.

[image: screen shot 2018-06-19 at 12 42 07 pm]
https://user-images.githubusercontent.com/24458700/41617658-53dd75f6-73be-11e8-8fb1-bc0a0a9e5208.png

Any help is greatly appreciated. If you need any additional
information, please reach out!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/1219, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtV3V54uVkUA8xOJBhnqe5IGNoJzxks5t-UZYgaJpZM4UuCX_
.

[HartiganHM]

@majapw Wow! Awesome fast response!

Glad to hear it's been flagged up already. Love what you're doing with react-dates, it's been a lot of fun to work with. I'll watch for the update! Any ETA?

[majapw]

Hi @HartiganHM, glad you're enjoying the package! :) This feature is available in v17.0.0. Note that you will also have to position the custom nav yourself (it really did strip out all styles).

Let me know if that in itself is a struggle or has any unexpected behavior. We could probably try to improve on this (maybe have position be a prop with a default value or something?).