Looked into this a bit, and currently the form element for the 2FA code is defined as this, which does not seem to be the right approach for a 2FA code form input element

<input placeholder="xxxxxx" type="password" id="code" class="ant-input">

A better approach would be something like this (derived from this blog post):

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

@hrak sounds like the credential filling is something the app does? Feel free to experiment if cloudstack UI can be changed with your suggested changes, and raise a PR !

I have the same issue. I found the issue to be caused by 1Password being confused by the page having 2 nested <form> elements: https://github.com/apache/cloudstack/blob/main/ui/src/views/dashboard/VerifyTwoFa.vue#L20

Removing one fixes the auto-fill issue. (tested by using Inspect Element)

Meanwhile I'm using this Greasemonkey script to address the issue in Firefox:

// ==UserScript==
// @name     Fix CloudStack Dashboard 2FA form
// @version  1
// @grant    none
// ==/UserScript==

const observeDOM = (fn, e = document.documentElement, config = { attributes: 1, childList: 1, subtree: 1 }, o = new MutationObserver(fn)) => (o.observe(e,config),()=>o.disconnect());

observeDOM(() => {
  const form = document.querySelector("div#app>div>form.ant-form-horizontal");
  if (form && form.parentNode) {
    const formTitle = form.querySelector("h1:first-of-type");
    if (formTitle.textContent === "Two Factor Authentication") {
      while (form.firstChild) {
        form.parentNode.insertBefore(form.firstChild, form);
      }
      form.remove();
    }
  }
}, document.querySelector("div#app"));