diff --git a/package.json b/package.json
index 649452f3..10c4e179 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "handlebars": "^4.0.5",
     "jquery": "^2.2.2",
     "json-loader": "^0.5.4",
-    "ng2-select2": "0.3.1",
+    "ng2-select2": "0.4.2",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "select2": "^4.0.3",
diff --git a/src/components/popover/tab/keymap/keymap-tab.component.html b/src/components/popover/tab/keymap/keymap-tab.component.html
index 815efcdf..e3b4b3d2 100644
--- a/src/components/popover/tab/keymap/keymap-tab.component.html
+++ b/src/components/popover/tab/keymap/keymap-tab.component.html
@@ -1,6 +1,6 @@
 <div>
     <b>Switch to keymap:</b>
-    <select2 [data]="keymapOptions" [selectedValue]="keymapOptions[selectedKeymapIndex + 1].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
+    <select2 [data]="keymapOptions" [value]="keymapOptions[selectedKeymapIndex + 1].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
 </div>
 <div>
     <div *ngIf="selectedKeymapIndex === -1">
diff --git a/src/components/popover/tab/keymap/keymap-tab.component.ts b/src/components/popover/tab/keymap/keymap-tab.component.ts
index 0c63e51d..5e5dcbeb 100644
--- a/src/components/popover/tab/keymap/keymap-tab.component.ts
+++ b/src/components/popover/tab/keymap/keymap-tab.component.ts
@@ -7,21 +7,20 @@ import {SvgKeyboardComponent} from '../../../svg/keyboard/svg-keyboard.component
 import {Tab} from '../tab';
 import {SwitchKeymapAction} from '../../../../../config-serializer/config-items/SwitchKeymapAction';
 
-import {OptionData} from 'ng2-select2/dist/select2';
-import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
+import {Select2Component, Select2OptionData} from 'ng2-select2/ng2-select2';
 
 @Component({
     moduleId: module.id,
     selector: 'keymap-tab',
     template: require('./keymap-tab.component.html'),
     styles: [require('./keymap-tab.component.scss')],
-    directives: [SvgKeyboardComponent, SELECT2_DIRECTIVES]
+    directives: [SvgKeyboardComponent, Select2Component]
 })
 export class KeymapTabComponent implements OnInit, Tab {
     @Input() defaultKeyAction: KeyAction;
 
     private keymaps: Keymap[];
-    private keymapOptions: Array<OptionData>;
+    private keymapOptions: Array<Select2OptionData>;
     private selectedKeymapIndex: number;
 
     constructor(private uhkConfigurationService: UhkConfigurationService) {
@@ -38,7 +37,7 @@ export class KeymapTabComponent implements OnInit, Tab {
             text: 'Switch to keymap'
         });
 
-        this.keymapOptions = this.keymapOptions.concat(this.keymaps.map(function (keymap: Keymap): OptionData {
+        this.keymapOptions = this.keymapOptions.concat(this.keymaps.map(function (keymap: Keymap): Select2OptionData {
             return {
                 id: keymap.id.toString(),
                 text: keymap.name
diff --git a/src/components/popover/tab/keypress/keypress-tab.component.html b/src/components/popover/tab/keypress/keypress-tab.component.html
index a6afc75e..e858d9cc 100644
--- a/src/components/popover/tab/keypress/keypress-tab.component.html
+++ b/src/components/popover/tab/keypress/keypress-tab.component.html
@@ -1,6 +1,6 @@
 <div class="scancode-options">
     <b class="setting-label">Scancode:</b>
-    <select2 #scanCodeSelect [data]="scanCodeGroups" [selectedValue]="scanCode.toString()" (valueChanged)="onScancodeChange($event)"
+    <select2 #scanCodeSelect [data]="scanCodeGroups" [value]="scanCode.toString()" (valueChanged)="onScancodeChange($event)"
         [templateResult]="scanCodeTemplateResult" [width]="200"></select2>
     <capture-keystroke-button></capture-keystroke-button>
 </div>
@@ -23,7 +23,7 @@
 </div>
 <div class="long-press-container">
     <b class="setting-label">Long press action:</b>
-    <select2 #longPressSelect [data]="longPressGroups" [selectedValue]="selectedLongPressIndex.toString()" (valueChanged)="onLongpressChange($event)"
+    <select2 #longPressSelect [data]="longPressGroups" [value]="selectedLongPressIndex.toString()" (valueChanged)="onLongpressChange($event)"
         [width]="140"></select2>
     <icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>
 </div>
\ No newline at end of file
diff --git a/src/components/popover/tab/keypress/keypress-tab.component.ts b/src/components/popover/tab/keypress/keypress-tab.component.ts
index 280395f5..3a112875 100644
--- a/src/components/popover/tab/keypress/keypress-tab.component.ts
+++ b/src/components/popover/tab/keypress/keypress-tab.component.ts
@@ -1,7 +1,6 @@
 import {Component, OnInit, Input} from '@angular/core';
 
-import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
-import {OptionData} from 'ng2-select2/dist/select2';
+import {Select2Component, Select2OptionData} from 'ng2-select2/ng2-select2';
 
 import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction';
 import {KeystrokeAction} from '../../../../../config-serializer/config-items/KeystrokeAction';
@@ -15,7 +14,7 @@ import {Tab} from '../tab';
     selector: 'keypress-tab',
     template: require('./keypress-tab.component.html'),
     styles: [require('./keypress-tab.component.scss')],
-    directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES]
+    directives: [CaptureKeystrokeButtonComponent, IconComponent, Select2Component]
 })
 export class KeypressTabComponent implements OnInit, Tab {
     @Input() defaultKeyAction: KeyAction;
@@ -26,8 +25,8 @@ export class KeypressTabComponent implements OnInit, Tab {
     private leftModifierSelects: boolean[];
     private rightModifierSelects: boolean[];
 
-    private scanCodeGroups: Array<OptionData>;
-    private longPressGroups: Array<OptionData>;
+    private scanCodeGroups: Array<Select2OptionData>;
+    private longPressGroups: Array<Select2OptionData>;
 
     private scanCode: number;
     private selectedLongPressIndex: number;
diff --git a/src/components/popover/tab/layer/layer-tab.component.html b/src/components/popover/tab/layer/layer-tab.component.html
index 715df025..6c1fb4a3 100644
--- a/src/components/popover/tab/layer/layer-tab.component.html
+++ b/src/components/popover/tab/layer/layer-tab.component.html
@@ -1,6 +1,6 @@
-<select2 #toggleSelect [data]="toggleData" [selectedValue]="toggle.toString()" (valueChanged)="toggleChanged($event)"></select2>
+<select2 #toggleSelect [data]="toggleData" [value]="toggle.toString()" (valueChanged)="toggleChanged($event)"></select2>
 <span>the</span>
-<select2 #layerSelect [data]="layerData" [selectedValue]="layer.toString()" (valueChanged)="layerChanged($event)"></select2>
+<select2 #layerSelect [data]="layerData" [value]="layer.toString()" (valueChanged)="layerChanged($event)"></select2>
 <span [ngSwitch]="toggle">
      <template ngSwitchCase="true">layer by pressing this key.</template>
      <template ngSwitchDefault="false">layer by holding this key.</template>
diff --git a/src/components/popover/tab/layer/layer-tab.component.ts b/src/components/popover/tab/layer/layer-tab.component.ts
index 30d58c79..7681438d 100644
--- a/src/components/popover/tab/layer/layer-tab.component.ts
+++ b/src/components/popover/tab/layer/layer-tab.component.ts
@@ -4,8 +4,7 @@ import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common';
 import {LayerName, SwitchLayerAction} from '../../../../../config-serializer/config-items/SwitchLayerAction';
 import {KeyAction} from '../../../../../config-serializer/config-items/KeyAction';
 
-import {Select2Component} from 'ng2-select2/dist/select2/select2.component';
-import {OptionData} from 'ng2-select2/dist/select2';
+import {Select2Component, Select2OptionData} from 'ng2-select2/ng2-select2';
 
 import {Tab} from '../tab';
 
@@ -24,7 +23,7 @@ export class LayerTabComponent implements OnInit, Tab {
     private toggle: boolean;
     private layer: LayerName;
 
-    private toggleData: Array<OptionData> = [
+    private toggleData: Array<Select2OptionData> = [
         {
             id: 'false',
             text: 'Activate'
@@ -35,7 +34,7 @@ export class LayerTabComponent implements OnInit, Tab {
         }
     ];
 
-    private layerData: Array<OptionData> = [
+    private layerData: Array<Select2OptionData> = [
         {
             id: '0',
             text: 'Mod'
diff --git a/src/components/popover/tab/macro/macro-tab.component.html b/src/components/popover/tab/macro/macro-tab.component.html
index f636d510..8552b7bb 100644
--- a/src/components/popover/tab/macro/macro-tab.component.html
+++ b/src/components/popover/tab/macro/macro-tab.component.html
@@ -1,6 +1,6 @@
 <div class="macro-selector">
     <b> Play macro: </b>
-    <select2 [data]="macroOptions" [selectedValue]="macroOptions[selectedMacroIndex + 1].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
+    <select2 [data]="macroOptions" [value]="macroOptions[selectedMacroIndex + 1].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
 </div>
 <div class="macro-action-container">
     <template [ngIf]="selectedMacroIndex >= 0">
diff --git a/src/components/popover/tab/macro/macro-tab.component.ts b/src/components/popover/tab/macro/macro-tab.component.ts
index bd4c9a55..464ff438 100644
--- a/src/components/popover/tab/macro/macro-tab.component.ts
+++ b/src/components/popover/tab/macro/macro-tab.component.ts
@@ -8,21 +8,20 @@ import {PlayMacroAction} from '../../../../../config-serializer/config-items/Pla
 import {Tab} from '../tab';
 import {MacroItemComponent} from './macro-item.component';
 
-import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2';
-import {OptionData} from 'ng2-select2/dist/select2';
+import {Select2Component, Select2OptionData} from 'ng2-select2/ng2-select2';
 
 @Component({
     moduleId: module.id,
     selector: 'macro-tab',
     template: require('./macro-tab.component.html'),
     styles: [require('./macro-tab.component.scss')],
-    directives: [MacroItemComponent, SELECT2_DIRECTIVES]
+    directives: [MacroItemComponent, Select2Component]
 })
 export class MacroTabComponent implements OnInit, Tab {
     @Input() defaultKeyAction: KeyAction;
 
     private macros: Macro[];
-    private macroOptions: Array<OptionData>;
+    private macroOptions: Array<Select2OptionData>;
     private selectedMacroIndex: number;
 
     constructor(private uhkConfigurationService: UhkConfigurationService) {
@@ -39,7 +38,7 @@ export class MacroTabComponent implements OnInit, Tab {
             text: 'Select macro'
         });
 
-        this.macroOptions = this.macroOptions.concat(this.macros.map(function (macro: Macro): OptionData {
+        this.macroOptions = this.macroOptions.concat(this.macros.map(function (macro: Macro): Select2OptionData {
             return {
                 id: macro.id.toString(),
                 text: macro.name