Clicking outside of current focused element causes previously focused element to be focused again

Hi all.

So here’s my rep:
github

it works fine when just selecting between the different pre-set tip values.
The problem is when I click the custom field, after selecting a pre-set tip, and then click outside of the custom field, the pre-set tip is highlighted again in lighblue.

It should remain dark as the custom field was last chosen, this should also happen if the user just selects the custom field but enters nothing (tip will default to zero ).

Does my explanation make sense? I just can’t get it to work, I’ve tried everything.
Hope someone has some insight.

I’m using bootstrap, sass/scss and just plain js.
Thanks

I solved it myself ,finally, by adding this code to the #custom code part:

[...document.querySelectorAll('.tip')].forEach(function(item) {
			 item.blur();
			 item.checked=false;
		 });