array.indexOf not working after filter

[jbakse]

I'm seeing some unexpected behavior when using indexOf on an array property of a "watched object" created with on-change.

watched.a.indexOf(watched.a[0]) should return 0, and does when i first create an array. But if I filter the array and resassign it, indexOf no longer works properly.

It is probably clearer to look at the code below to see the problem.

import onChange from "on-change";

const o = { a: [] };
const watched = onChange(o, () => {
  console.log("onChange");
});

watched.a = [{ a: 1 }, { a: 2 }, { a: 3 }];
// onChange
console.log("pre filter");
// pre filter
console.log("a", watched.a);
// a [ { a: 1 }, { a: 2 }, { a: 3 } ]
console.log("a.length", watched.a.length);
// a.length 3
console.log("indexOf[0]", watched.a.indexOf(watched.a[0]));
// indexOf[0] 0  <--- RIGHT!

watched.a = watched.a.filter(() => true);
// onChange
console.log("post filter");
// post filter
console.log("a", watched.a);
// a [ { a: 1 }, { a: 2 }, { a: 3 } ]
console.log("a.length", watched.a.length);
// a.length 3
console.log("indexOf[0]", watched.a.indexOf(watched.a[0]));
// indexOf[0] -1 <--- WRONG?!

I can sort of see how the proxy magic might confuse identity checks performed by indexOf, but I think that the behavior above is unintended.

I can work around the problem by using splice() instead of filter, but i'd like to use filter.