Preline Dropdown only works after hard refresh

[insivika]

Just implemented the premium dashboard component in my next.js project and came to find that i have to refresh the page to get the drop down to show up.

Clicking the profile button doesnt do anything:

After refreshing the page clicking the button opens the modal:

Here's my PrelineScript

'use client';

import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

import { IStaticMethods } from 'preline/preline';
declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

export default function PrelineScript() {
  const path = usePathname();

  useEffect(() => {
    const loadPreline = async () => {
      await import('preline/preline');
      window.HSStaticMethods.autoInit();
    };
    loadPreline();
  }, [path]);

  return null;
}

[amrajat]

Same issue I am experiencing, the advanced select works only after a hard refresh on the first render it looks something like this.

[insivika]

I see that the click event listener is not added to the button when navigating to the page, only when hard refreshing

[algebra2boy]

I have this issue as well. I have to hard refreshing my page to get the popover. Did you guys find a solution to solve this?

[insivika]

I had to change the PrelineScript back to how its suggested in the docs and increase the setTimeout delay from 100 to 1000

'use client';

/* eslint-disable @typescript-eslint/no-explicit-any */
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

declare global {
  interface Window {
    HSStaticMethods: any;
  }
}

export default function PrelineScript() {
  const path = usePathname();
  useEffect(() => {
    import('preline/preline');
  }, []);

  useEffect(() => {
    setTimeout(() => {
      window.HSStaticMethods.autoInit();
    }, 1000);
  }, [path]);

  return null;
}

[algebra2boy]

Hey, thanks for the quick reply. The suggested 1000 setTime delay works on my end! Thanks again.

[amrajat]

after changing the delay to 1000, it works for rendering only but its functionality still not working.

    const planEl = HSSelect.getInstance("#plan");
    planEl.on("change", (val) => setPlan(Number(val)));

    const planTypeEl = HSSelect.getInstance("#planType");
    planTypeEl.on("change", (val) => setPlanType(val));

    const quantityEl = HSInputNumber.getInstance("#quantity");
    quantityEl.on("change", ({ inputValue }) =>
      setQuantity(Number(inputValue))
    );
  });

When we try to select options it doesn't work.

[Paradiced]

This issue is the same as mentioned on #278, and is yet to be resolved.

Increasing the timeout does decrease the frequency of this issue, but it does still occasionally occur, it could be increased more to further improve it but the JS features are unresponsive for the duration of the timeout, which doesn't seem like a great solution to this.

Something has been introduced in v2 that is causing this issue as I've rolled back to 1.9.0 and this problem does not exist in that version.

[kishsak]

hi is the dropdown issue fixed?

[Natsume-197]

I've encountered this issue as well, even in 2.2.0 version (using Vue 3), not only with dropdowns but also with modals. As a temporary solution, reverting to version 1.9.0 fixed it.

[muhismail015]

I've encountered this issue as well, even in 2.2.0 version (using Vue 3), not only with dropdowns but also with modals. As a temporary solution, reverting to version 1.9.0 fixed it.

thx bro, i'am stress about that, downgrade the version 2.1.0 to 1.9.0 is worked in ReactJS 👍

[kgnfth]

I've encountered this issue as well, even in 2.2.0 version (using Vue 3), not only with dropdowns but also with modals. As a temporary solution, reverting to version 1.9.0 fixed it.

Thx for the solution

[jahaganiev]

Hey folks, since every framework has its ins and outs it's hard to know what exactly causing the issue. We suggest to open a new issue with Stackblitz demo and step by step details to reproduce the issue.

Here's a great example how JS components should be integrated to specific frameworks.

Cheers!