All the dates are selected in date range picker when setting startDate and endDate null or empty

[manishg345]

Subject of the issue

All the dates are selected in date range picker when setting startDate and endDate null or empty

[BUG] Bug Reproduce Steps

In DateRangePicker state object, set startDate and endDate as null

[BUG] Expected behaviour

Initially when both of the date textfields are set as blank, none of the date should be selected in the calendar of DRP

Environment

Package Version:
React version:
Node version:
Browser:

[shaohuahuang]

+1

[ao-alex]

+1

[fsdiogo]

+1, every day gets the rdrInRange class, which just doesn't make sense.

[gaieges]

Noted the same / similar issue in #330 (comment) with some demos there.

[bertho-zero]

To work around this I added a class rdrNoSelection:

  const rdrNoSelection = useMemo(
    () => {
      const range = ranges?.[0];
      return !range || (range.startDate === null && range.endDate === null);
    },
    [ranges]
  );

.rdrNoSelection {
  .rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge {
    background: #fff;
  }

  .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
  .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
  .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
  .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
    color: $oa-black;

    &:after {
      background: $oa-blue;
    }
  }
}

[smitser]

+1

[stephaned-ev]

It's an old issue but is there any update?

[KaziMuneeb]

To work around this I added a class rdrNoSelection:

  const rdrNoSelection = useMemo(
    () => {
      const range = ranges?.[0];
      return !range || (range.startDate === null && range.endDate === null);
    },
    [ranges]
  );

.rdrNoSelection {
  .rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge {
    background: #fff;
  }

  .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
  .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
  .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
  .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
    color: $oa-black;

    &:after {
      background: $oa-blue;
    }
  }
}

where should i add the code?