One part of my migration plan to angular typescript is also to get rid of something we called "page scripts" which basically were a bunch of globally registered jQuery scripts that were pertinent to a certain page but not limited to a certain controller or directive but enacted upon all or multiple rendered components. It was a way to previously get some code-reuse across parts where the developer was not aware of how to do it through services or similar approaches.

With that explained, I now went down the rabbit hole of checking "What is this function used for and is it needed anymore?"-queries... There was one particular one that removed and added a class to an input's child element if you clicked on the input and if you clicked outside of it.

We have similar functionality that recently got converted into a component, so I checked that component and it also had some issues. It was also binding to the document and with a global click event. Manipulating the DOM or attaching to "outside" isn't a desirable thing as it may introduce unnecessary or unexpected DOM manipulations or cause serious side-effects. There's an isolate scope for a reason.

So.... to get some code-reuse and reusing that drop-down component, I have to first fix that so it's keeping to itself, then replace all instances of a dropdown multi-select element with that shared component instead and once that is done I can remove the pageScript code.

I'm feeling a little bit like Hal from Malcom in the middle.