Mouseleave - Chrome Bug

a sample of incorrectly firing mouseleave event handler.

by janga_jack

HTML

<div class="container">
  <div class="wrapper">
    <ul class="list">
      <li>
        <label>
          <input type="checkbox">Selected</label>
      </li>
      <li>
        <label>
          <input type="checkbox">Assigned</label>
      </li>
      <li>
        <label>
          <input type="checkbox">Open</label>
      </li>
      <li>
        <label>
          <input type="checkbox">Overrideable</label>
      </li>
      <li>
        <label>
          <input type="checkbox">Unavailable</label>
      </li>
      <li>
        <label>
          <input type="checkbox">Inactive</label>
      </li>
      <li>
        <hr>
      </li>
      <li>
        <label>
          <input type="checkbox">BIA</label>
      </li>
      <li>
        <hr>
      </li>
      <li>
        <label>
          <input type="checkbox">Satellite</label>
      </li>
    </ul>
  </div>
</div>
<div id="report">

</div>

SCSS

.container {
  max-width: 10em;
  background-color: lightblue;
}
.wrapper {
  
}
.list{
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  & li {
    padding: .2em .3em;
  }
  & label {
    display: inline-block;
    width: 100%;
    &:hover {
      cursor: pointer;
    }
  }
  & input[type="checkbox"] {
    margin: 0 1em 0 .7em;
    &:hover {
      cursor: pointer;
    }
  }
}
#report {
  border: 1.5px dashed #d4d4d4;
  height: 15em;
  overflow: auto;
  margin: .5em;
  padding: .5em;
}

JavaScript

let report = document.querySelector('#report');
let logger = (reporttext) => {
	let entry = document.createElement('div');
  entry.innerText = reporttext;
  report.prepend(entry);
}

document.querySelector('ul.list').addEventListener(
  'change',
  (e) => {
  	logger('change fired');
  	console.log('change fired', e);
    //e.preventDefault(); e.cancelBubble = true;e.stopImmediatePropagation();
  },
  false
);

let wrapper = document.querySelector('div.wrapper')
wrapper.addEventListener(
  'mouseleave',
  (e) => {
  	logger('mouseleave fired');
    console.log('mouseleave fired', e);
  },
  false
);