Mutation Obs..what?

Posted by Kevin Tran on 2020-04-16

Time to Research Something New and Implement

To start off the day, I spoke to my Lead Engineer and he decided it was ok for us to just use react-materialize for the dropdown menu I had been working on. For this scenario it just seemed better to keep it simple since other parts of the application were also using the same dropdown menu. But the issue is that one of the dropdown selections has a badge attatched to it that is pretty important for user experience. The badge notifies when there is anew message so the user doesn't have to keep checking. We messed around with the CSS for a little bit to see if we could get the badge to show up outside of the dropdown when it was collapsed, we couldnt figure out a way since react-materialize uses display none for when the dropdown menu isn't showing.

We talked it out a little more and the next steps are trying to listen for the creation of that dom element and once it's created to clone it and place it in the headers bar so that the user can see it. My task now to get that accomplished is to use MutationObserver, and cloneNode. I'm still working with the mutation observer to get it to log to the console once the element is found, but currently it is not workng, there is an error of the target not being a node. So I am currently troubleshooting that but hope to have it done soon.

I have a few more tasks that I need to start so I might go to those and see if I can finish those first because some of them are a little more simple then I can come back to this one. Day four has been relatively good, I can't wait to get more accustomed to the code base and start touching on things I don't know yet. But that will come with time. But this weekend will definitely call for some extra studying and some work on a personal project if I have the time.

...back to blogs