data-prevent-nprogress doesn't work if element has children

[Nicolas Jarraud]

In the following example, clicking on the button element will not trigger the progress bar as expected but clicking on any children that may be inside e.g. LuPlusCircle will.

type Props = { label: string };
const Organisations = ({ label }: Props) => {
  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    e.preventDefault();
  };

  return (
    <Link href="">
      <div className="grow">{label}</div>
      <button className="h-4.5 w-4.5" onClick={handleClick} data-prevent-nprogress={true}>
        <LuPlusCircle size="100%" />
      </button>
    </Link>
  );
};

I believe you shall also check the ancestors of the target here -

const preventProgress = target?.getAttribute('data-prevent-nprogress') === 'true' || anchorElement?.getAttribute('data-prevent-nprogress') === 'true';

[Josh]

Also experiencing this issue - on latest release 2.3.11

[Fajar Alnito Bagasnanda]

experiencing this