setOptions() overrides previous modifiers

CodeSandbox demo code

import { createPopper } from "@popperjs/core";

const button = document.querySelector("#button");
const tooltip = document.querySelector("#tooltip");

// Create a popper instance with some offset
let popper = createPopper(button, tooltip, {
  placement: "right",
  modifiers: [{ name: "offset", options: { offset: [0, 20] } }]
});

// Uncommenting the following will remove the offset
// popper.setOptions({
//   modifiers: [{ name: "eventListeners", enabled: true }]
// });

Steps to reproduce the problem

1. Do createPopper() with an offset modifier
2. Call setOptions() to enable/disable listeners
3. The offset is now gone

What is the expected behavior?

I would expect existing modifiers to be unaffeted

What went wrong?

The offset is now gone

Any other comments?

My expectations come from the tutorial, where the behavior I expect is described. However pasting the tutorial’s full code into codepen, shows no offset.

This could be a documentation issue, since the actual tutorial code is different than the one displayed. But since I can’t find any clear documentation for setOptions(), I will assume it is a bug.

[FezVrasta]

I added an option to pass a function to setOptions that will work very similarly to how React’s state setters work.

https://popper.js.org/docs/v2/constructors/#setoptions

[FezVrasta]

I haven’t included an auto-merge functionality because it would increase a lot the size of the library, I’d rather left this to the consumer if they ever need it.