diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 95a179270..d49cf30af 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -20,6 +20,7 @@ import { CachingInterceptor } from './core/service/cache.interceptor';
 import { AuthorizedInterceptor } from './core/service/authorized.interceptor';
 import { NotificationModule } from './notification/notification.module';
 import { ErrorInterceptor } from './core/service/error.interceptor';
+import { NavigatorService } from './core/service/navigator.service';
 
 @NgModule({
     declarations: [
@@ -44,6 +45,7 @@ import { ErrorInterceptor } from './core/service/error.interceptor';
         NotificationModule
     ],
     providers: [
+        NavigatorService,
         { provide: RouterStateSerializer, useClass: CustomRouterStateSerializer },
         {
             provide: HTTP_INTERCEPTORS,
diff --git a/ui/src/app/core/service/navigator.service.ts b/ui/src/app/core/service/navigator.service.ts
new file mode 100644
index 000000000..c54aa6931
--- /dev/null
+++ b/ui/src/app/core/service/navigator.service.ts
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class NavigatorService {
+    constructor() {}
+
+    get native(): any {
+        return window.navigator;
+    }
+} /* istanbul ignore next */
diff --git a/ui/src/app/metadata-filter/container/new-filter.component.spec.ts b/ui/src/app/metadata-filter/container/new-filter.component.spec.ts
index ca5c444ba..e38ff2b34 100644
--- a/ui/src/app/metadata-filter/container/new-filter.component.spec.ts
+++ b/ui/src/app/metadata-filter/container/new-filter.component.spec.ts
@@ -5,6 +5,8 @@ import { NewFilterComponent } from './new-filter.component';
 import * as fromFilter from '../reducer';
 import { ProviderEditorFormModule } from '../../metadata-provider/component';
 import { ProviderStatusEmitter, ProviderValueEmitter } from '../../metadata-provider/service/provider-change-emitter.service';
+import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
+import { NavigatorService } from '../../core/service/navigator.service';
 
 describe('New Metadata Filter Page', () => {
     let fixture: ComponentFixture<NewFilterComponent>;
@@ -16,14 +18,17 @@ describe('New Metadata Filter Page', () => {
             providers: [
                 ProviderStatusEmitter,
                 ProviderValueEmitter,
-                FormBuilder
+                FormBuilder,
+                NgbPopoverConfig,
+                NavigatorService
             ],
             imports: [
                 StoreModule.forRoot({
                     providers: combineReducers(fromFilter.reducers),
                 }),
                 ReactiveFormsModule,
-                ProviderEditorFormModule
+                ProviderEditorFormModule,
+                NgbPopoverModule
             ],
             declarations: [NewFilterComponent],
         });
diff --git a/ui/src/app/metadata-provider/component/forms/relying-party-form.component.ts b/ui/src/app/metadata-provider/component/forms/relying-party-form.component.ts
index db4e816e1..d74d556fa 100644
--- a/ui/src/app/metadata-provider/component/forms/relying-party-form.component.ts
+++ b/ui/src/app/metadata-provider/component/forms/relying-party-form.component.ts
@@ -73,7 +73,6 @@ export class RelyingPartyFormComponent extends ProviderFormFragmentComponent imp
     }
 
     addAuthenticationMethod(text: string = ''): void {
-        console.log(this.authenticationMethodList as FormArray);
         this.authenticationMethodList.push(this.getRequiredControl(text));
     }
 
diff --git a/ui/src/app/widget/autocomplete/autocomplete.component.html b/ui/src/app/widget/autocomplete/autocomplete.component.html
index 34eb148f4..de7557abd 100644
--- a/ui/src/app/widget/autocomplete/autocomplete.component.html
+++ b/ui/src/app/widget/autocomplete/autocomplete.component.html
@@ -9,7 +9,7 @@
         role="textbox"
         [attr.aria-activedescendant]="activeDescendant"
         attr.aria-owns="{{ id }}__listbox"
-        (focus)="handleInputFocus($event)"
+        (focus)="handleInputFocus()"
         (blur)="handleInputBlur($event)"
     />
     <ul class="dropdown-menu"
@@ -23,7 +23,7 @@
             [class.focused]="state.currentState.focused === i"
             id="{{ id }}__option--{{ i }}"
             (focusout)="handleOptionBlur($event, i)"
-            (click)="handleOptionClick($event, i)"
+            (click)="handleOptionClick(i)"
             (mousedown)="handleOptionMouseDown($event)"
             (mouseenter)="handleOptionMouseEnter(i)"
             (mouseout)="handleOptionMouseOut()"
diff --git a/ui/src/app/widget/autocomplete/autocomplete.component.spec.ts b/ui/src/app/widget/autocomplete/autocomplete.component.spec.ts
index 3b9a44a70..69e1dbd31 100644
--- a/ui/src/app/widget/autocomplete/autocomplete.component.spec.ts
+++ b/ui/src/app/widget/autocomplete/autocomplete.component.spec.ts
@@ -1,13 +1,27 @@
-import { Component, ViewChild, SimpleChange, ElementRef } from '@angular/core';
+import { Component, ViewChild, SimpleChange, ElementRef, SimpleChanges } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreModule, Store, combineReducers } from '@ngrx/store';
 import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/popover/popover.module';
 import { AutoCompleteComponent } from './autocomplete.component';
+import { NavigatorService } from '../../core/service/navigator.service';
+
+const iPodAgent = `Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X)
+    AppleWebKit/534.46 (KHTML, like Gecko)
+    Version/5.1 Mobile/9A334 Safari/7534.48.3`;
+const regularAgent = `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3)
+    AppleWebKit/537.36 (KHTML, like Gecko)
+    Chrome/64.0.3282.186 Safari/537.36`;
 
 @Component({
-    template: `<auto-complete [id]="config.id" [autoSelect]="config.autoSelect" [options]="config.options"></auto-complete>`
+    template: `
+        <auto-complete [id]="config.id"
+            [autoSelect]="config.autoSelect"
+            [options]="config.options"
+            [allowCustom]="config.allowCustom">
+        </auto-complete>
+    `
 })
 class TestHostComponent {
     config: any = {
@@ -16,7 +30,7 @@ class TestHostComponent {
         required: true,
         defaultValue: '',
         id: 'foo',
-        allowCustom: true,
+        allowCustom: false,
         noneFoundText: 'None Found'
     };
 
@@ -32,10 +46,13 @@ describe('AutoComplete Input Component', () => {
     let testHostInstance: TestHostComponent;
     let testHostFixture: ComponentFixture<TestHostComponent>;
     let instanceUnderTest: AutoCompleteComponent;
+    let navigatorInstance: NavigatorService;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            providers: [],
+            providers: [
+                NavigatorService
+            ],
             imports: [
                 NoopAnimationsModule,
                 ReactiveFormsModule
@@ -51,6 +68,7 @@ describe('AutoComplete Input Component', () => {
         testHostFixture = TestBed.createComponent(TestHostComponent);
         testHostInstance = testHostFixture.componentInstance;
         instanceUnderTest = testHostInstance.autoCompleteUnderTest;
+        navigatorInstance = TestBed.get(NavigatorService);
         testHostFixture.detectChanges();
     });
 
@@ -97,6 +115,29 @@ describe('AutoComplete Input Component', () => {
         });
     });
 
+    describe('ngOnChanges lifecycle event', () => {
+        const opts = ['foo', 'bar', 'baz'];
+        it('should add options to state if provided', () => {
+            spyOn(instanceUnderTest.state, 'setState');
+            testHostInstance.configure({
+                options: opts
+            });
+            testHostFixture.detectChanges();
+            expect(instanceUnderTest.state.setState).toHaveBeenCalledWith({
+                options: opts
+            });
+        });
+
+        it('should not set the state if no options were provided', () => {
+            spyOn(instanceUnderTest.state, 'setState');
+            testHostInstance.configure({
+                focused: null
+            });
+            testHostFixture.detectChanges();
+            expect(instanceUnderTest.state.setState).not.toHaveBeenCalled();
+        });
+    });
+
     describe('setValidation method', () => {
         let mockChanges = {
             disabled: new SimpleChange(false, true, false),
@@ -189,8 +230,130 @@ describe('AutoComplete Input Component', () => {
         });
     });
 
-    xdescribe('handleEnter handler', () => {
+    describe('handleComponentBlur handler', () => {
+        const opts = ['foo', 'bar', 'baz'];
+        it('should set a new state', () => {
+            instanceUnderTest.state.setState({options: opts, selected: 0, query: 'foo'});
+            spyOn(instanceUnderTest.state, 'setState');
+            instanceUnderTest.handleComponentBlur({menuOpen: true});
+            expect(instanceUnderTest.state.setState).toHaveBeenCalledWith({
+                focused: null,
+                selected: null,
+                menuOpen: true,
+                query: 'foo'
+            });
+        });
+
+        it('should set the menuOpen state to false if not provided', () => {
+            instanceUnderTest.state.setState({ options: opts, selected: 0, query: 'foo' });
+            spyOn(instanceUnderTest.state, 'setState');
+            instanceUnderTest.handleComponentBlur();
+            expect(instanceUnderTest.state.setState).toHaveBeenCalledWith({
+                focused: null,
+                selected: null,
+                menuOpen: false,
+                query: 'foo'
+            });
+        });
+
+        it('should allow custom values when the property is set', () => {
+            testHostInstance.configure({allowCustom: true});
+            instanceUnderTest.state.setState({ options: opts, selected: -1, query: 'hi' });
+            testHostFixture.detectChanges();
+            spyOn(instanceUnderTest, 'propagateChange');
+            instanceUnderTest.handleComponentBlur();
+            expect(instanceUnderTest.propagateChange).toHaveBeenCalledWith('hi');
+        });
+
+        it('should detect if query is in current options', () => {
+            instanceUnderTest.state.setState({ options: opts, selected: -1, query: 'foo' });
+            testHostFixture.detectChanges();
+            spyOn(instanceUnderTest, 'propagateChange');
+            instanceUnderTest.handleComponentBlur();
+            expect(instanceUnderTest.propagateChange).toHaveBeenCalledWith('foo');
+        });
+    });
+
+    describe('handleEnter handler', () => {
+        const opts = ['foo', 'bar', 'baz'];
+        it('should call preventDefault on the provided event if the menu is currently open', () => {
+            const ev = { preventDefault: jasmine.createSpy('preventDefault') };
+            instanceUnderTest.state.setState({options: opts, menuOpen: true});
+            instanceUnderTest.handleEnter(ev);
+            expect(ev.preventDefault).toHaveBeenCalled();
+        });
+        it('should NOT call preventDefault on the provided event if the menu is not open', () => {
+            const ev = { preventDefault: jasmine.createSpy('preventDefault') };
+            instanceUnderTest.state.setState({ options: opts, menuOpen: false });
+            instanceUnderTest.handleEnter(ev);
+            expect(ev.preventDefault).not.toHaveBeenCalled();
+        });
+
+        it('should call componentBlur if there is no selected option and the query is not in the options', () => {
+            const ev = { preventDefault: jasmine.createSpy('preventDefault') };
+            spyOn(instanceUnderTest, 'handleComponentBlur');
+            instanceUnderTest.state.setState({ options: opts, menuOpen: true, query: 'hi', selected: -1 });
+            instanceUnderTest.handleEnter(ev);
+            expect(instanceUnderTest.handleComponentBlur).toHaveBeenCalledWith({
+                focused: -1,
+                selected: -1,
+                menuOpen: false
+            });
+        });
+
+        it('should call handleOptionClick if there is no selected option but the query is in the options', () => {
+            const ev = { preventDefault: jasmine.createSpy('preventDefault') };
+            spyOn(instanceUnderTest, 'handleOptionClick');
+            instanceUnderTest.state.setState({ options: opts, menuOpen: true, query: 'foo', selected: -1 });
+            instanceUnderTest.handleEnter(ev);
+            expect(instanceUnderTest.handleOptionClick).toHaveBeenCalledWith(0);
+        });
+    });
+
+    describe('handleInputFocus handler', () => {
+        it('should set the state focused attribute to the input fields index', () => {
+            spyOn(instanceUnderTest.state, 'setState');
+            instanceUnderTest.handleInputFocus();
+            expect(instanceUnderTest.state.setState).toHaveBeenCalledWith({focused: -1});
+        });
+    });
+
+    describe('handleOptionFocus handler', () => {
+        it('should set the state focused attribute to the focused option', () => {
+            spyOn(instanceUnderTest.state, 'setState');
+            instanceUnderTest.handleOptionFocus(1);
+            expect(instanceUnderTest.state.setState).toHaveBeenCalledWith({focused: 1, selected: 1});
+        });
+    });
+
+    describe('handleOptionClick handler', () => {
+        const expected = {
+            menuOpen: false,
+            focused: -1,
+            selected: -1,
+            query: 'bar'
+        };
+        it('should set the state to menuOpen: false, focused to -1, selected to -1, and the query to the selected option', () => {
+            spyOnProperty(instanceUnderTest.state, 'currentState', 'get').and.returnValue({
+                matches: ['foo', 'bar'],
+                options: ['foo', 'bar', 'baz'],
+                query: 'bar'
+            });
+            spyOn(instanceUnderTest.state, 'setState');
+            instanceUnderTest.handleOptionClick(1);
+            expect(instanceUnderTest.state.setState).toHaveBeenCalledWith(expected);
+        });
 
+        it('should not call propagateChange if the selected option is not in the list of matches', () => {
+            spyOnProperty(instanceUnderTest.state, 'currentState', 'get').and.returnValue({
+                matches: ['foo', 'bar'],
+                options: ['foo', 'bar', 'baz'],
+                query: 'bar'
+            });
+            spyOn(instanceUnderTest, 'propagateChange');
+            instanceUnderTest.handleOptionClick(4);
+            expect(instanceUnderTest.propagateChange).not.toHaveBeenCalled();
+        });
     });
 
     describe('handleOptionMouseDown method', () => {
@@ -254,4 +417,38 @@ describe('AutoComplete Input Component', () => {
             expect(instanceUnderTest.activeDescendant).toBe(`${id}__option--${focused}`);
         });
     });
+
+    describe('isIosDevice method', () => {
+        it('should return true if navigator.userAgent is an ipad', () => {
+            spyOnProperty(navigatorInstance, 'native', 'get').and.returnValue({ userAgent: iPodAgent });
+            expect(instanceUnderTest.isIosDevice()).toBe(true);
+        });
+        it('should return false if navigator.userAgent is not an ios device', () => {
+            spyOnProperty(navigatorInstance, 'native', 'get').and.returnValue({ userAgent: regularAgent });
+            expect(instanceUnderTest.isIosDevice()).toBe(false);
+        });
+    });
+
+    describe('queryOption getter', () => {
+        it('should return the query if the query exists in the collection', () => {
+            instanceUnderTest.state.setState({query: 'foo', options: ['foo', 'bar']});
+            expect(instanceUnderTest.queryOption).toBe('foo');
+        });
+        it('should return null if the query does not in the collection', () => {
+            instanceUnderTest.state.setState({ query: 'foo', options: ['bar', 'baz'] });
+            expect(instanceUnderTest.queryOption).toBe(null);
+        });
+        it('should return null if the query is undefined/null', () => {
+            instanceUnderTest.state.setState({ query: null, options: ['bar', 'baz'] });
+            expect(instanceUnderTest.queryOption).toBe(null);
+        });
+        it('should return null if the options are undefined/null', () => {
+            instanceUnderTest.state.setState({ query: 'foo', options: null });
+            expect(instanceUnderTest.queryOption).toBe(null);
+        });
+        it('should return null if the options list is empty', () => {
+            instanceUnderTest.state.setState({ query: 'foo', options: [] });
+            expect(instanceUnderTest.queryOption).toBe(null);
+        });
+    });
 });
diff --git a/ui/src/app/widget/autocomplete/autocomplete.component.ts b/ui/src/app/widget/autocomplete/autocomplete.component.ts
index f267cf7e3..ada38bef3 100644
--- a/ui/src/app/widget/autocomplete/autocomplete.component.ts
+++ b/ui/src/app/widget/autocomplete/autocomplete.component.ts
@@ -25,6 +25,7 @@ import 'rxjs/add/operator/combineLatest';
 import { keyCodes, isPrintableKeyCode } from '../../shared/keycodes';
 import { AutoCompleteState, AutoCompleteStateEmitter, defaultState } from './autocomplete.model';
 import * as AutoCompleteValidators from './autocomplete-validators.service';
+import { NavigatorService } from '../../core/service/navigator.service';
 
 const POLL_TIMEOUT = 1000;
 const MIN_LENGTH = 2;
@@ -81,7 +82,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     propagateChange = (_: any | null) => { };
     propagateTouched = (_: any | null) => { };
 
-    constructor() {}
+    constructor(private navigator: NavigatorService) {}
 
     ngOnInit(): void {
         this.$pollInput = Observable.interval(POLL_TIMEOUT);
@@ -127,22 +128,6 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
         if (changes.options) {
             this.state.setState({options: this.options});
         }
-        const focusedChanged = !!changes.focused;
-        if (focusedChanged) {
-            const componentLostFocus = changes.focused.currentValue === null;
-            const focusDifferentElement = focusedChanged && !componentLostFocus;
-            if (focusDifferentElement) {
-                this.elementReferences[this.focused].nativeElement.focus();
-            }
-            const focusedInput = this.focused === INPUT_FIELD_INDEX;
-            const componentGainedFocus = focusedChanged && changes.focused.previousValue === null;
-            const selectAllText = focusedInput && componentGainedFocus;
-            if (selectAllText) {
-                let inputElement = this.inputField.nativeElement;
-                inputElement.setSelectionRange(0, inputElement.value.length);
-            }
-        }
-
         this.setValidation(changes);
     }
 
@@ -201,8 +186,12 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     handleComponentBlur(newState: any = {}): void {
         let { selected, options, query } = this.state.currentState,
             change = options && options[selected] ? options[selected] : null;
-        if (!change && (this.allowCustom || this.queryOption)) {
-            change = this.queryOption;
+        if (!change) {
+            if (this.allowCustom) {
+                change = query;
+            } else {
+                change = this.queryOption;
+            }
         }
         this.propagateChange(change);
         this.propagateTouched(null);
@@ -267,7 +256,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
         }
     }
 
-    handleInputFocus(event: FocusEvent): void {
+    handleInputFocus(): void {
         this.state.setState({
             focused: INPUT_FIELD_INDEX
         });
@@ -278,7 +267,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
             selected: index
         });
     }
-    handleOptionClick(event: MouseEvent | KeyboardEvent, index: number): void {
+    handleOptionClick(index: number): void {
         let { matches, options } = this.state.currentState;
         const selectedOption = matches[index];
         if (selectedOption) {
@@ -335,11 +324,11 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
         event.preventDefault();
         const focusIsOnOption = this.state.currentState.focused !== -1;
         if (focusIsOnOption) {
-            this.handleOptionClick(event, this.state.currentState.focused);
+            this.handleOptionClick(this.state.currentState.focused);
         }
     }
 
-    handleEnter(event: KeyboardEvent): void {
+    handleEnter(event: KeyboardEvent | { preventDefault: () => {} }): void {
         let { options, selected, query, menuOpen } = this.state.currentState;
         if (menuOpen) {
             event.preventDefault();
@@ -350,7 +339,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
                 selected = hasSelectedOption ? queryIndex : selected;
             }
             if (hasSelectedOption) {
-                this.handleOptionClick(event, selected);
+                this.handleOptionClick(selected);
             } else {
                 this.handleComponentBlur({
                     focused: -1,
@@ -378,7 +367,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     }
 
     isIosDevice() {
-        return !!(navigator.userAgent.match(/(iPod|iPhone|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g));
+        let agent = this.navigator.native.userAgent;
+        return !!(agent.match(/(iPod|iPhone|iPad)/g) && agent.match(/AppleWebKit/g));
     }
 
     get queryOption(): string | null {