How to reset an input type=number element when the user clicks it using JavaScript

Question

I'm experimenting with the <input type="number" ...> list option to create a numeric input field that displays a set of predefined 'favorite' values, but still allow other values to be typed in by the user.

Here is what I have, so far:

<label>
  Zoom(%)
  <input type="number"
         min="50" step="50" value="100"
         list="favorites"
         title="Please enter or choose a zoom value." />
  <datalist id="favorites">
    <option value="100" />
    <option value="150" />
    <option value="200" />
    <option value="250" />
    <option value="300" />
  </datalist>
</label>

Problems:

There are two problems:

1. After the first time selecting/entering a value and exiting the field, the next time the field had the focus, the drop-down list only shows some of options that sort of match the current input value, and
2. The input element must be cleared and clicked twice in order to display the full list of options.

Goal:

How do I get the full list of options to show everytime the drop-down list shows?

I tried adding an inline onclick="this.value = '';" code segment to the input element in order to reset the input element each time the user clicks the input element, but while sometimes this seems to work, it doesn't always work, even in the same browser, so this isn't a cross-browser issue.

Is there a way to reset an input element, like a form reset does, without actually using an enclosing form element?

My issue about using a form is that when I'm using a form element to enclose the input field and reset the parent form, I can't nest forms to isolate just the one input element and resetting the parent form resets all of the input elements, which I don't want.

Here is a CodePen examples showing my test case and others. The last example in the CodePen example shows an alternate to the input type number, but without the list attribute. This separates the list feature from the input element so that the drop-down-list doesn't show until the user presses the down-triangle list button, next to the input element. When before the list actually displays, the options in the list are filters with anything that the user may have typed into the input field and supports partial matches. The initial/default value of the input field is not used as a filter, so that the whole list is displayed until something is typed into the field or after the clear button is clicked.