diff --git a/ui/app/components/auth-config-form/options.js b/ui/app/components/auth-config-form/options.js
index 73a2dd063..82f850e1e 100644
--- a/ui/app/components/auth-config-form/options.js
+++ b/ui/app/components/auth-config-form/options.js
@@ -5,7 +5,7 @@ import DS from 'ember-data';
 export default AuthConfigComponent.extend({
   saveModel: task(function*() {
     const model = this.get('model');
-    let data = model.get('config').toJSON();
+    let data = model.get('config').serialize();
     data.description = model.get('description');
     try {
       yield model.tune(data);
diff --git a/ui/app/templates/components/ttl-picker.hbs b/ui/app/templates/components/ttl-picker.hbs
index ce6ec531f..f42a890c7 100644
--- a/ui/app/templates/components/ttl-picker.hbs
+++ b/ui/app/templates/components/ttl-picker.hbs
@@ -6,7 +6,7 @@
        value={{time}}
        id="time-{{elementId}}"
        type="text"
-       name="time"
+       name="time-{{elementId}}"
        class="input"
        oninput={{action 'changedValue' 'time'}}
        />
@@ -15,8 +15,8 @@
     <div class="select is-fullwidth">
       <select
          data-test-ttl-unit
-         name="unit"
-         id="unit"
+         name="unit-{{elementId}}"
+         id="unit-{{elementId}}"
          onchange={{action 'changedValue' 'unit'}}
          >
          {{#each unitOptions as |unitOption|}}
diff --git a/ui/tests/acceptance/settings/auth/configure/section-test.js b/ui/tests/acceptance/settings/auth/configure/section-test.js
index 878f9c1dd..3d018aba6 100644
--- a/ui/tests/acceptance/settings/auth/configure/section-test.js
+++ b/ui/tests/acceptance/settings/auth/configure/section-test.js
@@ -2,11 +2,16 @@ import { test } from 'qunit';
 import moduleForAcceptance from 'vault/tests/helpers/module-for-acceptance';
 import enablePage from 'vault/tests/pages/settings/auth/enable';
 import page from 'vault/tests/pages/settings/auth/configure/section';
+import apiStub from 'vault/tests/helpers/noop-all-api-requests';
 
 moduleForAcceptance('Acceptance | settings/auth/configure/section', {
   beforeEach() {
+    this.server = apiStub({ usePassthrough: true });
     return authLogin();
   },
+  afterEach() {
+    this.server.shutdown();
+  },
 });
 
 test('it can save options', function(assert) {
@@ -20,6 +25,11 @@ test('it can save options', function(assert) {
     page.save();
   });
   andThen(() => {
+    let tuneRequest = this.server.passthroughRequests.filterBy('url', `/v1/sys/mounts/auth/${path}/tune`)[0];
+    let keys = Object.keys(JSON.parse(tuneRequest.requestBody));
+    assert.ok(keys.includes('default_lease_ttl'), 'passes default_lease_ttl on tune');
+    assert.ok(keys.includes('max_lease_ttl'), 'passes max_lease_ttl on tune');
+
     assert.equal(
       page.flash.latestMessage,
       `The configuration options were saved successfully.`,
diff --git a/ui/tests/integration/components/auth-config-form/options-test.js b/ui/tests/integration/components/auth-config-form/options-test.js
new file mode 100644
index 000000000..f3428720e
--- /dev/null
+++ b/ui/tests/integration/components/auth-config-form/options-test.js
@@ -0,0 +1,42 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import Ember from 'ember';
+import wait from 'ember-test-helpers/wait';
+import hbs from 'htmlbars-inline-precompile';
+import sinon from 'sinon';
+
+import { create } from 'ember-cli-page-object';
+import authConfigForm from 'vault/tests/pages/components/auth-config-form/options';
+
+const component = create(authConfigForm);
+
+moduleForComponent('auth-config-form/options', 'Integration | Component | auth-config-form options', {
+  integration: true,
+  beforeEach() {
+    Ember.getOwner(this).lookup('service:flash-messages').registerTypes(['success']);
+    component.setContext(this);
+  },
+
+  afterEach() {
+    component.removeContext();
+  },
+});
+
+test('it submits data correctly', function(assert) {
+  let model = Ember.Object.create({
+    tune() {
+      return Ember.RSVP.resolve();
+    },
+    config: {
+      serialize() {
+        return {};
+      },
+    },
+  });
+  sinon.spy(model.config, 'serialize');
+  this.set('model', model);
+  this.render(hbs`{{auth-config-form/options model=model}}`);
+  component.save();
+  wait().then(() => {
+    assert.ok(model.config.serialize.calledOnce);
+  });
+});
diff --git a/ui/tests/pages/components/auth-config-form/options.js b/ui/tests/pages/components/auth-config-form/options.js
new file mode 100644
index 000000000..0aef0cc41
--- /dev/null
+++ b/ui/tests/pages/components/auth-config-form/options.js
@@ -0,0 +1,9 @@
+import { clickable, fillable } from 'ember-cli-page-object';
+
+import fields from '../form-field';
+export default {
+  ...fields,
+  ttlValue: fillable('[data-test-ttl-value]'),
+  ttlUnit: fillable('[data-test-ttl-value]'),
+  save: clickable('[data-test-save-config]'),
+};
diff --git a/ui/tests/pages/components/form-field.js b/ui/tests/pages/components/form-field.js
index 4f5c2779c..20a47ec26 100644
--- a/ui/tests/pages/components/form-field.js
+++ b/ui/tests/pages/components/form-field.js
@@ -43,7 +43,7 @@ export default {
       // we use name in the label `for` attribute
       // this is consistent across all types of fields
       //(otherwise we'd have to use name on select or input or textarea)
-      return this.toArray().findBy('for', name);
+      return this.filterBy('for', name)[0];
     },
     fillIn(name, value) {
       return this.findByName(name).input(value);