React-dates: Not applying classes when hovering days

[andreoliveirawinny]

Hi!

I am using the latest version of react-dates (12.5.1) and when I am hovering the days in the calendar (DateRangePicker), it is not applying the classes to the active days.

Browser: Google Chrome

Thank you.

[majapw]

Hi @andreoliveirawinny, is this in the storybook or in your own config? If it is your own set-up, can you share your config? Are you getting any console errors? By active days, do you mean the days you are hovering over or do you mean selected/highlighted days?

[andreoliveira56]

@majapw Thanks for the reply.

Both. It doesn't work in the storybook and in my project so, I think we can focus on the storybook.
If I go to the default DateRangePicker (DRP) example and start hovering the days, it doesn't apply any classes to the markup and therefore, no CSS, no colors.

I am using Google Chrome and it is updated. The strangest thing is that I saw it working on another computer and using Google Chrome.

Thank you.

[majapw]

@andreoliveira56 can you share a gif of what you're seeing?

Can you also make sure that you have a DateRangePicker/DRP story selects and not the DayPicker story?

[andreoliveira56]

@majapw

Like you can see, when hovering the days, nothing is happening. I tried to reset the google chrome settings without success.

Google Chrome Version: Version 61.0.3163.79 (Official Build) (64-bit)

Thanks.

[majapw]

What the heck? Can you open the console and let me know if there are any JS
errors? I'll try to repro myself, but I feel like it was def working for me
yesterday.

On Thu, Sep 7, 2017, 4:22 AM andreoliveira56 [e-mail]
wrote:

@majapw https://github.com/majapw

[image: Alt Text]
https://camo.githubusercontent.com/21f7695f0656d88865561b1d795078610616dd91/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f6c3337386a7a434c6f6b6852573878656f2f67697068792e676966

Like you can see, when hovering the days, nothing is happening.

Google Chrome Version: Version 61.0.3163.79 (Official Build) (64-bit)

Thanks.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-dates/issues/697#issuecomment-327771296,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABUdtffHwcYe7FMyuc032Ccnqf5JPKmzks5sf9IBgaJpZM4PIj6i
.

[andreoliveira56]

Sorry, but no errors, even with 'Pause on caught exceptions'.

Do you know if there is any settings/options on google chrome to prevent something related to hovering? I reset it, but who knows.

[majapw]

The only thing I can think of mobile device testing, which doesn't have hover.

@ljharb Do you have any ideas? I can't reproduce this at all.

[kaiserkoenig]

I can only hover the days 2 month before/ after. July is selected,June + August do not work, but Mai + September... and it's a regular device (Mac, Chrome, DevTools on)

[jeremymarc]

got the same issue with Windows 10 / Edge

[andreoliveira56]

I am still having the same issue on react-dates examples.

@majapw Did you find something? Thanks!

[perzanko]

Go the same Issue, ver. 16.3.6.
Downgrading to 15.5.3 fixed problem for me.

[michaelolo24]

Same here, version 18.1.1

edit - removing and reinstalling the package seemed to fix the issue for me

[arshKhachatryan]

Hello,
I have the same issue in react-dates(20.0.0), on Win10/Edge.
This issue exist even in https://www.airbnb.com/ when browsing with Edge.
https://www.screencast.com/t/bDGA6Czw

[arshKhachatryan]

Hello,
I found out why it behaves like that.
The module airbnb/is-touch-device returns TRUE for Edge browser. This module is used in onDayMouseEnter(day){} function in DayPickerRangeController.jsx component

onDayMouseEnter(day) {
    /* eslint react/destructuring-assignment: 1 */
    if (this.isTouchDevice) return;
    console.log(this.isTouchDevice)
    const {
      startDate,
      endDate,
      focusedInput,
      minimumNights,
      startDateOffset,
      endDateOffset,
    } = this.props;

    const {
      hoverDate,
      visibleDays,
      dateOffset,
    } = this.state;

    let nextDateOffset = null;

    if (focusedInput) {
      const hasOffset = startDateOffset || endDateOffset;
      let modifiers = {};

      if (hasOffset) {
        const start = getSelectedDateOffset(startDateOffset, day);
        const end = getSelectedDateOffset(endDateOffset, day, rangeDay => rangeDay.add(1, 'day'));

        nextDateOffset = {
          start,
          end,
        };

        // eslint-disable-next-line react/destructuring-assignment
        if (dateOffset && dateOffset.start && dateOffset.end) {
          modifiers = this.deleteModifierFromRange(modifiers, dateOffset.start, dateOffset.end, 'hovered-offset');
        }
        modifiers = this.addModifierToRange(modifiers, start, end, 'hovered-offset');
      }

      if (!hasOffset) {
        modifiers = this.deleteModifier(modifiers, hoverDate, 'hovered');
        modifiers = this.addModifier(modifiers, day, 'hovered');

        if (startDate && !endDate && focusedInput === END_DATE) {
          if (isAfterDay(hoverDate, startDate)) {
            const endSpan = hoverDate.clone().add(1, 'day');
            modifiers = this.deleteModifierFromRange(modifiers, startDate, endSpan, 'hovered-span');
          }

          if (!this.isBlocked(day) && isAfterDay(day, startDate)) {
            const endSpan = day.clone().add(1, 'day');
            modifiers = this.addModifierToRange(modifiers, startDate, endSpan, 'hovered-span');
          }
        }

        if (!startDate && endDate && focusedInput === START_DATE) {
          if (isBeforeDay(hoverDate, endDate)) {
            modifiers = this.deleteModifierFromRange(modifiers, hoverDate, endDate, 'hovered-span');
          }

          if (!this.isBlocked(day) && isBeforeDay(day, endDate)) {
            modifiers = this.addModifierToRange(modifiers, day, endDate, 'hovered-span');
          }
        }

        if (startDate) {
          const startSpan = startDate.clone().add(1, 'day');
          const endSpan = startDate.clone().add(minimumNights + 1, 'days');
          modifiers = this.deleteModifierFromRange(modifiers, startSpan, endSpan, 'after-hovered-start');

          if (isSameDay(day, startDate)) {
            const newStartSpan = startDate.clone().add(1, 'day');
            const newEndSpan = startDate.clone().add(minimumNights + 1, 'days');
            modifiers = this.addModifierToRange(
              modifiers,
              newStartSpan,
              newEndSpan,
              'after-hovered-start',
            );
          }
        }
      }

      this.setState({
        hoverDate: day,
        dateOffset: nextDateOffset,
        visibleDays: {
          ...visibleDays,
          ...modifiers,
        },
      });
    }
  }

And when it returns TRUE the function is returned without doing anything,

[ljharb]

Seems like you filed https://github.com/airbnb/is-touch-device/issues/2 for that; thanks!

[alangrn]

Is there any update on this? I am using Chrome and the same occurs for me. The hover range is not displayed.