Autocomplete three input boxes based on tel-area-code and tel-local-prefix/suffix autocomplete options

Question

Here is a codepen I made of an autocomplete problem I'm facing: https://codepen.io/rboesp/pen/PoOjedZ

<div>
  <form autocomplete="on" >
    <fieldset>
      <label for="1">area code</label>
      <input type="text" autocomplete="tel-area-code" name="area_code" id="1">
      <label for="2">prefix</label>
      <input type="text" autocomplete="tel-local-prefix" name="prefix" id="2">
      <label for="3">suffix</label>
      <input type="text" autocomplete="tel-local-suffix" name="suffix" id="3"> 
    </fieldset>
    <input type="submit" value="submit me">
  </form>
</div>

If you click on the first input and pick a number to be autocompleted, it will correctly fill the area code and prefix, but not the suffix. img here

If the user clicks on the third input box, it correctly chooses the suffix as the option (and if you pick the third input the first time, it fills all three). However I was hoping for all three to fill if I autocomplete from the first input box.

Does anybody know if there is a way to do that?

I learned about the tel-area-code, tel-local-prefix/suffix on this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

thanks