Autofill Broken for Credit Card Expiration Date - html

Question

For a credit card expiration date, which form elements are “correct” and play nicely with browser autofill?
I’ve seen two main ways of doing it. As a Safari user, this is the most common field that silently fails when I’m auto-filling payment information. Here’s a failure from a real-life experience:
<select>-based field
<label for="billing-cc-exp" class="inputLabelPayment">Expiration Date:</label>
<select name="billing-cc-exp" id="billing-cc-exp" onfocus="methodSelect('pmt-gps')" autocomplete="off">
<option value="0322" selected="selected">03/2022</option>
<option value="0422">04/2022</option>
<option value="0522">05/2022</option>
<option value="0622">06/2022</option>
…
</select>
<input>-based field
<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
<input> is more frequently recommended (StackOverflow and tutorial examples), but I’m not sure if <select> StackOverflow example) is specifically a problem, or if it’s just more frequently implemented wrong. So what about the above <select> example breaks autofill, and how would you fix it?
Update: autocomplete isn't the problem
I’ve tested autocomplete="cc-exp”, and the form is still broken for Safari AutoFill, so my self-answer answer is wrong (or at least insufficient).
<select name="billing-cc-exp" id="billing-cc-exp" onfocus="methodSelect('pmt-gps')" autocomplete="cc-exp">
<option value="0322" selected="selected">03/2022</option>
<option value="0422">04/2022</option>
…
</select>

Answer 1

Look at the HTML autocomplete attribute on each of those form fields!
The form elements are not the problem here.
Your broken example has autocomplete=off, as dumb as that is for an expiration date field. The (presumably) working examples have some combination of autocomplete=cc-exp or cc-exp-month and cc-exp-year.
Fixed webform:
<label for="billing-cc-exp" class="inputLabelPayment">Expiration Date:</label>
<select name="billing-cc-exp" id="billing-cc-exp" onfocus="methodSelect('pmt-gps')" autocomplete="cc-exp">
<option value="03/2022" selected="selected">03/2022</option>
<option value="04/2022">04/2022</option>
<option value="05/2022">05/2022</option>
<option value="06/2022">06/2022</option>
…
</select>
There's nothing special about Safari going on here. Chrome looks to the same attribute (related post). Autofill can work without the attribute, as in this JSFiddle example, but autocomplete=off will break it!