Buggy autofill when loading svg via object

HTML

<div>
  <div id="container">
    This one is buggy if you type in 1 number and try to autofill:
    <br />
    <input id="buggy" autocomplete="cc-number" name="cardnumber" />
  </div>
  <div id="containergood">
    This one is not:
    <br />
    <input id="notbuggy" autocomplete="cc-number" name="cardnumber" />
  </div>
</div>

CSS

div {
  margin-bottom: 30px;
}

JavaScript

function loadVisaLogo() {
  const visa = document.createElement('object');
  visa.setAttribute('data', 'https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg');
  visa.setAttribute('tabindex', '-1');
  visa.setAttribute('height', '16px');
  visa.addEventListener('load', () => {
  	visa.setAttribute('height', '16px');
  });
  
  container.appendChild(visa);
}

function loadVisaLogoGood() {
  const visa = document.createElement('img');
  visa.setAttribute('src', 'https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg');
  visa.setAttribute('height', '16px');
  
  containergood.appendChild(visa);
}

document.querySelector('input#buggy').addEventListener('input', (ev) => {
  if (ev.target.value.length === 1) {
  	loadVisaLogo();
  }
});

document.querySelector('input#notbuggy').addEventListener('input', (ev) => {
	if (ev.target.value.length === 1) {
    loadVisaLogoGood();
  }
})