Clicking on a div's scroll bar fires the blur event in I.E

Question

I have a div that acts like a drop-down. So it pops-up when you click a button and it allows you to scroll through this big list. So the div has a vertical scroll bar. The

Answer 1

I don't think this is an IE issue.

It's more a case of how to design your interaction and where to handle which event. If you have a unique css-class-accessor for the related target, canceling a blur event can be done by checking the classList of the event.relatedTarget for the element you want to allow or disallow to initiate the blur event. See my onBlurHandler from a custom autocomplete dropdown in an ES2015 project of mine (you might need to work around contains() for older JS support):

onBlurHandler(event: FocusEvent) {
  if (event.relatedTarget 
      && (event.relatedTarget as HTMLElement).classList.contains('folding-select-result-list')) {
    // Disallow any blur event from `.folding-select-result-list`
    event.preventDefault();
  } else if (!event.relatedTarget
      || event.relatedTarget 
      && !(event.relatedTarget as HTMLElement).classList.contains('select-item')) {
    // If blur event is from outside (not `.select-item`), clear the suggest list
    // onClickHandler of `.select-item` will clear suggestList as configured with this.clearAfterSelect
    this.clearOptions(this.clearAfterBlur);
  }
}

• .folding-select-result-list is my suggestions-dropdown having 'empty spots' and 'possibly a scrollbar', where I don't need this blur event.
• .select-item has it's own onClickHandler that fires the XHR-request of the selection, and closes the dropdown when another property of the component this.clearAfterSelect is true.