Cannot read properties of undefined (reading 'querySelector'), in DateRangePickerComponent

[Jonathan Deehan]

Hi,

The DateRangePickerComponent currently gives an error under circumstances where you select a value from another dropdown within the same parent component, then proceed to select the DateRangePickerComponent, then deselect it.

The error stack looks something like this:

Warning: validateDOMNesting(...): <div> cannot appear as a child of <table>.

Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

Uncaught TypeError: Cannot read properties of undefined (reading 'querySelector')

Using:

    "@syncfusion/ej2-react-calendars": "^22.2.9",

Are there any workarounds for this?

Thanks.

[Kokila Poovendran]

Hi Jonathan Deehan,

Greeting from Syncfusion support!

Thank you for reaching out to us with your concern about the DateRangePickerComponent. We appreciate your detailed description of the issue. 

After reviewing your query, we created a sample and attempted to replicate the problem using the provided information. Unfortunately, we were unable to reproduce the issue on our end.

You can review our sample implementation on StackBlitz: https://stackblitz.com/edit/react-grpdtk-ncsnbf?file=index.js,package.json

To better assist you, we kindly ask for additional details about your specific implementation. Could you please provide a more comprehensive code snippet or modify the sample to reflect your scenario? Additionally, sharing any replication steps and a video illustration of the issue would greatly aid our investigation.

Our goal is to address your concern promptly, and your collaboration in providing more information will help us achieve that.

Thank you for your understanding and cooperation.

Regards,
Kokila Poovendran.

[Jonathan Deehan]

Hi Kokila,

Thank you for the reply. 

Here are some code snippets of the date range picker logic to help assist in the understanding of our issue (note, onChange  refers to a function passed in the props that this date picker component resides within): 

      <div className="dateRangePicker">

        <DateRangePickerComponent

          id={uuid()}

          locale="translatedTags"

          format="dd/MM/yyyy"

          openOnFocus={true}

          presets={presets}

          value={values}

          max={defaultToDate()}

          change={onChangeInternal}

        />

      </div>

  const onChangeInternal = (args: RangeEventArgs): void => {

    const { isInteracted, startDate, endDate } = args

    if (!isInteracted) {

      return

    }

    let result: Date[] = []

    if (startDate && endDate) {

      const fromDate = moment(startDate).startOf('day').toDate()

      const toDate = moment(endDate).endOf('day').toDate()

      result = [fromDate, toDate]

    }

    onChange(result)

  }

  const presets = [

    {

      label: `3 months`,

      start: threeMonthFromDateOption(),

      end: defaultToDate(),

    },

    {

      label: `6 months`,

      start: sixMonthFromDateOption(),

      end: defaultToDate(),

    },

    {

      label: `12 months`,

      start: twelveMonthFromDateOption(),

      end: defaultToDate(),

    },

  ]

  L10n.load({

    translatedTags: {

      daterangepicker: {

        customRange: 'Custom Range',

        placeholder: 'Select Range',

      },

    },

  })

[Kokila Poovendran]

Hi Jonathan Deehan,

Thank you for sharing the code snippets. We've carefully reviewed the provided information and tested it using the sample you shared. However, we couldn't replicate the reported issue on our end.

We've incorporated the valueChange event with the code you provided and created a sample using the information you shared. Here's the sample: Sample:  https://stackblitz.com/edit/react-grpdtk-ay92wk?file=index.js,index.css

Please take a look at the sample, and please modify it to include the specific conditions or scenarios that replicate the issue you are facing. This will help us better understand and address the problem.

If there are additional details or specific steps to reproduce the issue, kindly provide them so that we can investigate further and provide a more accurate solution.

Thank you for your cooperation.