Two bugs in version 9.

[lariane-guerra]

Description

Hi everyone, how are you all doing?

First of all, I'd like to highlight how cool the react-day-picker project is. Of all the libraries I've tested, this one is the most stable and pleasant to use and style.

However, I'm applying it in a new project at the company I work for and I encountered two issues that didn't exist in version 8.

The first issue is as follows:

The calendar has a weird width when it is set with locale={ptBr}. To reproduce the scenario, you can use the playground.

The second issue is when I create a function to clear the range that the user selected.

For example: from July 1st to July 10th, if they don't want this date range anymore, they click on clear and the range is cleared (This worked in version 8).

I will share some code with you.

Expected Behavior

For the first issue, I expect that even with the locale change, the style remains the same, as it does for en-US.

And for the second issue, I hope to be able to clear the range when this button is clicked, setting the range to undefined.

Actual Behavior

As I mentioned, currently the style for pt-BR is different from the default; it seems to receive padding between the days in the table.

And for the second issue, apparently the range object receives undefined, but the range style is not removed.

Steps to Reproduce

For the first bug:

Access: https://daypicker.dev/playground
Change the mode to range and select a period. Notice that the days are connected and everything is styled correctly.

Now, change the Locale to ptBR and select the same range. Notice that there seems to be padding between the selected days and throughout the table.

For the second issue, it's more difficult to reproduce, but you can create a button to trigger a function that sets the range object to undefined. The object is updated with the range set to undefined, but the style is not cleared.

Just to note, this used to work in version 8.
But a example:

function handleButtonClearDate() {
    setRange(undefined)
    onClearDateField('startPeriod', '')
    onClearDateField('endPeriod', '')
    onClearDateField('dateShortcut', '')
  }

This is the file where I create the range and more things

import { useRef, useState } from ‘react’
import { DateRange } from ‘react-day-picker’

type DataPeriodFieldType = ‘startPeriod’ | ‘endPeriod’ | ‘dateShortcut’

export function useNewDatePicker(
  startPeriod: unknown,
  endPeriod: unknown,
  onApplyDateField: (field: DataPeriodFieldType, value?: Date | string) => void,
  onClearDateField: (field: DataPeriodFieldType, value?: Date | string) => void,
) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
  const [range, setRange] = useState<DateRange | undefined>({
    from: startPeriod as Date,
    to: endPeriod as Date,
  })

  const isOpen = Boolean(anchorEl)

  function handleOnClickTextField() {
    setAnchorEl(containerRef.current)
  }

  function handleOnBlurTextField() {
    setAnchorEl(null)
  }

  function handleButtonApplyDate() {
    onApplyDateField(‘startPeriod’, range?.from)
    onApplyDateField(‘endPeriod’, range?.to)
  }

  function handleButtonClearDate() {
    setRange(undefined)
    onClearDateField(‘startPeriod’, ‘’)
    onClearDateField(‘endPeriod’, ‘’)
    onClearDateField(‘dateShortcut’, ‘’)
  }

  return {
    range,
    isOpen,
    containerRef,
    setRange,
    handleOnClickTextField,
    handleOnBlurTextField,
    handleButtonApplyDate,
    handleButtonClearDate,
  }
}

Possible Solution

I really don't know.

Your Environment

• React version: 17.0.2
• Your Timezone: UTC-3 (Brazil Time)
• Browser [e.g. chrome, safari]: Chorme
• Version [e.g. 22]: 126.0.6478.183
• Operating System [e.g. iOS, Windows]: macOS

[gpbl]

@lariane-guerra thanks so much for your detailed bug reports. I could identify the issues you described and provide a fix in #2294 and #2295.