79534726

Date: 2025-03-25 20:02:15
Score: 0.5
Natty:
Report link

Also faced the same issue.

When writing a custom modifier in Popper.js, there are some required parameters that need to be passed:

  name: string,
  enabled: boolean,
  phase: ModifierPhases,
  fn: (ModifierArguments<Options>) => ?State,

If multiple modifiers with the same name are passed, they are merged. While writing a offset modifier in ng-bootstrap, we often assume that the default offset modifier is already present and merged with our one. However, in ng-bootstrap, the default offset modifier is not set, leading to the issue since the required fn attribute is missing.

to fix need to update code as follow

import { offset as offsetModifier, Options } from '@popperjs/core';
.
.
.
  options: (options: Partial<Options>) => Partial<Options> = (options) => {
    options.modifiers!.push(offsetModifier, {
      name: 'offset',
      options: {
        offset: () => [0, 10],
      },
    });
    return options;
  };

references: https://popper.js.org/docs/v2/modifiers/#custom-modifiers https://popper.js.org/docs/v2/faq/#how-do-i-set-modifier-defaults-and-allow-them-to-be-overridden https://github.com/ng-bootstrap/ng-bootstrap/blob/4137c6062c497869af7998b2ebfdd429eb6e2a97/src/util/positioning-util.ts

Reasons:
  • Probably link only (1):
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Low reputation (0.5):
Posted by: Himanshu Patil