How to enable circular navigation on HTML Select?

Question

I would think this is a pretty basic requirement, but I can't seem to find a single post about this.

I have a simple html select element on my page, when the user presses arrow down, the selection moves very nicely downwards.

What I want to do is that when the user reaches the last option and presses down again, the selection should jump to the first item. and vice versa.

Any ideas?

Thanks!

UPDATE:

Here are my current attempts

<select onKeyDown={(e) => {
var a = 1;
}}
onKeyPress={(e) => {
var a = 1;
}}
>
{options.map((rec) => (
<option
  value={rec.Key}
  key={rec.Key}
  onFocus={() => {
    var a = 1;
  }}
  onKeyDown={() => {
    var a = 1;
  }}
>
  {rec.Value}
</option>
))}
</select>;

none on the events fire