Incorrect position if tailwind set important true

[erwinyusrizal]

Hi, If I set tailwind config important: true the datepicker dropdown open to the default position top-0 left-0 since it is important, the dynamic position ignored

I think you need to get rid the top-0 left-0 default class from the datepicker dropdown since the initial position already handled by JS

Thanks

[timotiushadi]

im having this problem too. Is this already fixed? or any alternative way to do the correct ways?

[lanius412]

The code below is not the fix but my temporary solution. (datepicker.js)

From:

elementClass === 'dropdown' ? element.classList.add('dropdown', 'absolute', 'top-0', 'left-0', 'z-50', 'pt-2') : null;

To:

elementClass === 'dropdown' ? element.classList.add('dropdown', 'absolute', 'z-50', 'pt-2') : null;

In addition, when clicking or focusing, you can scroll to the datepicker with the following code.

function onFocus(datepicker) {
  if (datepicker.config.showOnFocus && !datepicker._showing) {
    datepicker.show();
     // ↓↓↓
    datepicker.picker.element.scrollIntoView({  
      behavior: 'smooth'  
    });
  }
}

function onClickInput(datepicker, ev) {
  const el = ev.target;
  if (!el._clicking) {
    return;
  }
  clearTimeout(el._clicking);
  delete el._clicking;

  if (el._active) {
    datepicker.enterEditMode();
  }
  delete el._active;

  if (datepicker.config.showOnClick) {
    datepicker.show();
    // ↓↓↓
    datepicker.picker.element.scrollIntoView({  
      behavior: 'smooth'  
    });
  }
}