diff --git a/app/components/api-token-row.js b/app/components/api-token-row.js
index eb8255a63ef..280d1abad60 100644
--- a/app/components/api-token-row.js
+++ b/app/components/api-token-row.js
@@ -7,8 +7,9 @@ export default Component.extend({
   serverError: null,
 
   didInsertElement() {
-    if (this.get('api_token.isNew')) {
-      this.$('input').focus();
+    let input = this.element.querySelector('input');
+    if (input && input.focus) {
+      input.focus();
     }
   },
 
diff --git a/app/templates/components/api-token-row.hbs b/app/templates/components/api-token-row.hbs
index 8eeaf0a4dfa..03ad410e751 100644
--- a/app/templates/components/api-token-row.hbs
+++ b/app/templates/components/api-token-row.hbs
@@ -6,8 +6,10 @@
           placeholder="New token name"
           disabled=api_token.isSaving
           value=api_token.name
-          autofocus=true
-          enter="saveToken"}}
+          autofocus="autofocus"
+          enter="saveToken"
+          data-test-focused-input=true
+      }}
     {{else}}
       {{ api_token.name }}
     {{/if}}
diff --git a/tests/integration/components/api-token-row-test.js b/tests/integration/components/api-token-row-test.js
new file mode 100644
index 00000000000..e02f4469acd
--- /dev/null
+++ b/tests/integration/components/api-token-row-test.js
@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | api-token-row', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('input is focused if token is new', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+    this.set('api_token', {
+      isNew: true,
+    });
+
+    await render(hbs`{{api-token-row api_token=api_token}}`);
+    assert.dom('[data-test-focused-input]').isFocused();
+  });
+});