How to dynamically add options to select after it is already open?

Question

JavaScript

Goal: every time you open a select menu, request a list of options somewhere and generate a menu on the fly.

An attempt at a solution: hang a handler on onfocus that generates and adds new options.
According to the link embed.plnkr.co/B0303y/preview, the implementation in jquery and a few in angular.

Everything works great in firefox.
And in chrome, the dropdown menu is not redrawn, at best, a scrollbar is added instead.
Haven't tried it in other browsers.

But purely humanly, I quite understand chrome. The drop-down list is already drawn in the browser ui, which, as it were, is not obliged to dynamically monitor what is happening on the page.
And I'm not sure that in the next version of firefox everything will remain chikipuki.

Question: how else can you pull off such a trick so as not to scare the browser too much?

Answer 1

Use your custom list

Answer 2

You wrap select in additional. an element in which at the very end you add an invisible div to the height of the select so that it is on top of the select and does not miss a click on it. When you click on this div, you launch the request, updating the ui with a loading type class, on which you hang the loading animation using css. After receiving the data, publish it to the scope and trigger a fake "click" event on the select element.
If you need an example directive - write in the comments.

Answer 3

You can use React.js
Here is another VanillaJS that works great in Chrome:

<select onclick='loadOptions(event)'></select>

<script>
function loadOptions(e) {
  setInterval(function () {
    var o = document.createElement('option');
    o.innerHTML = 'hello';
    e.target.appendChild(o);
  }, 500);
}
</script>