DateRangePickerComponent Pop-ups Overlap on Screen in React App

[Muhammad]

Hello,
I'm using two DateRangePickerComponent elements in my React-App, one positioned on the left side of the page and the other on the right. However, I'm encountering an issue where the pop-ups for both date pickers appear at the same location on the screen, rather than below their respective input fields.

I've gone through the documentation and attempted different approaches, but I haven't been able to get the pop-ups to align correctly under each input field.

I've attached a short video to illustrate the issue.

Expected Behavior:
Each date picker's pop-up should display directly below it's input field, maintaining it's relative position.

Current Behavior:
Both date pickers pop-ups appear at the same position on the screen, regardless of the input field location.

Please advice on how I can resolve this or if there is any configuration I might have missed.

Thank you.

Attachment: Screen_Recording_20241020_001344_d36987ab.rar

[UdhayaKumar Duraisamy]

In your application, you have hidden the input of the DateRangePicker component. The DateRangePicker popup is positioned based on the input position. Since the input is hidden, both DateRangePicker popups are positioned at the “Top-Left” position.

To append the popup at the desired location, you can use the open event and appendTo property of the DateRangePicker component as shown in the code snippet below:

const Default = () => {

  let drpObj_1;

  let drpObj_2;

 

  function showpopup_1() {

    drpObj_1.show();

  }

 

  function showpopup_2() {

    drpObj_2.show();

  }

 

  function onOpen(args, target) {

    console.log(args);

    args.appendTo = document.querySelector(target);

    args.popup.element.style.position = 'relative';

  }

  return (

    <div>

      <table>

        <tr>

          <td>

            <div className="control-pane">

              <button className={'e-btn'} onClick={showpopup_1}>

                Show Popup

              </button>

              <hr />

              <div id="drp-container">

                <DateRangePickerComponent

                  ref={(daterangepicker) => (drpObj_1 = daterangepicker)}

                  id="drp1"

                  open={(e) => onOpen(e, '#darp_1_popup')}

                ></DateRangePickerComponent>

              </div>

              <div id="darp_1_popup">DateRangePopup Target 1</div>

            </div>

          </td>

          <td>

            <div className="control-right">

              <button className={'e-btn'} onClick={showpopup_2}>

                Show Popup

              </button>

              <hr />

 

              <div id="drp-container">

                <DateRangePickerComponent

                  ref={(daterangepicker) => (drpObj_2 = daterangepicker)}

                  id="drp1"

                  open={(e) => onOpen(e, '#darp_2_popup')}

                ></DateRangePickerComponent>

              </div>

              <div id="darp_2_popup">DateRangePopup Target 2</div>

            </div>

          </td>

        </tr>

      </table>

    </div>

  );

};

export default Default;

Sample: Iwfsm3 (forked) - StackBlitz