I'm creating a substitute for a <select /> element, which is working pretty well - even in Firefox. Long story short, I create a list of <div class="option">, and add a click listener to each of those, that handles setting the correct selected value etc etc.
However, if the list is too long to display on the screen, I switch the position of the container element of my options from absolute to fixed.
Suddenly, in Firefox 45, the click handlers for my options are not being fired. Works perfectly in both Chrome and Safari and IE.
Any idea as to why?
Here's a codepen with all my code (there's a lot of it). It works for some reason when I remove the surrounding divs for each element, but not with them.
The code that's not being fired is the following in the _initEvents() method:
this.$options.forEach((option, index) => {
option.addEventListener('click', e => {
console.log('this never fires');
this.currentIndex = index;
this._changeOption();
this._toggleDropdown();
});
});
Edit: Adding html, body { height: 100% } fixes the problem on CodePen, but not in my site. Any idea why?
Edit 2: Turns out it works... sometimes. But it's buggy as hell - it selects the wrong option and what not.