Why is the input name overriding the autocomplete attribute?

I've got a contact form, and I'm trying to setup the autocomplete/autofill attributes for the form. Suppose I have a UK mobile number, along with other personal details added in Chrome's autofill settings: eg. 01234567891 (not real number), autocomplete will remove the leading 0, so the value in the input would be: 1234567891 This is not a desired behaviour.

Here is my phone input:

<input type="tel" class="form-control phone" name="phone" size="20"  minlength="10" placeholder="Phone" autocomplete="tel">

I have read multiple resources about the autocomplete, including from the official HTML specs and I have also experimented and changed multiple attributes while researching the problem, but to no avail. But what I discovered is that if I change the name value to something that doesn't relate or match to phone / mobile / phonenumber / mobilenumber, and all other variations, it works as intended. Example: name="cheese"

However, obviously it's not ideal to have it named something unrelated. Thus my question: Why does it do this? What is the correlation between the 2 attributes and how can I avoid the issue at hand whilst maintaining clean readable code?

Why is the name overriding the autocomplete attribute?

I have made a JSFiddle for ease.

Note: I have only tested this in Chrome