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