diff --git a/app/components/gh-select-native.js b/app/components/gh-select-native.js
new file mode 100644
index 0000000000..9499c7d782
--- /dev/null
+++ b/app/components/gh-select-native.js
@@ -0,0 +1,40 @@
+import Component from 'ember-component';
+import {reads} from 'ember-computed';
+
+function K() {
+    return this;
+}
+
+export default Component.extend({
+    content: null,
+    prompt: null,
+    optionValuePath: 'id',
+    optionLabelPath: 'title',
+    selection: null,
+    action: K, // action to fire on change
+
+    // shadow the passed-in `selection` to avoid
+    // leaking changes to it via a 2-way binding
+    _selection: reads('selection'),
+
+    actions: {
+        change() {
+            // jscs:disable requireArrayDestructuring
+            let selectEl = this.$('select')[0];
+            // jscs:enable requireArrayDestructuring
+            let {selectedIndex} = selectEl;
+
+            // decrement index by 1 if we have a prompt
+            let hasPrompt = !!this.get('prompt');
+            let contentIndex = hasPrompt ? selectedIndex - 1 : selectedIndex;
+
+            let selection = this.get('content').objectAt(contentIndex);
+
+            // set the local, shadowed selection to avoid leaking
+            // changes to `selection` out via 2-way binding
+            this.set('_selection', selection);
+
+            this.sendAction('action', selection);
+        }
+    }
+});
diff --git a/app/templates/components/gh-timezone-select.hbs b/app/templates/components/gh-timezone-select.hbs
index 8b770b2f5a..b8e84f71a8 100644
--- a/app/templates/components/gh-timezone-select.hbs
+++ b/app/templates/components/gh-timezone-select.hbs
@@ -1,13 +1,13 @@
 <label for="activeTimezone">Timezone</label>
 <span class="gh-select" data-select-text="{{selectedTimezone.label}}" tabindex="0">
-    {{one-way-select
+    {{gh-select-native
         id="activeTimezone"
         name="general[activeTimezone]"
-        options=selectableTimezones
+        content=selectableTimezones
         optionValuePath="name"
         optionLabelPath="label"
-        value=selectedTimezone
-        update=(action "setTimezone")
+        selection=selectedTimezone
+        action="setTimezone"
     }}
 </span>
 {{#if hasTimezoneOverride}}
diff --git a/app/templates/post-settings-menu.hbs b/app/templates/post-settings-menu.hbs
index 8e1fd9ae80..1cb5f3689a 100644
--- a/app/templates/post-settings-menu.hbs
+++ b/app/templates/post-settings-menu.hbs
@@ -67,14 +67,14 @@
                 <label for="author-list">Author</label>
                 <span class="input-icon icon-user">
                     <span class="gh-select" tabindex="0">
-                    {{one-way-select
-                        id="author-list"
+                    {{gh-select-native
                         name="post-setting-author"
-                        options=authors
+                        id="author-list"
+                        content=authors
                         optionValuePath="id"
                         optionLabelPath="name"
-                        value=selectedAuthor
-                        update=(action "changeAuthor")
+                        selection=selectedAuthor
+                        action="changeAuthor"
                     }}
                     </span>
                 </span>
diff --git a/app/templates/team/user.hbs b/app/templates/team/user.hbs
index c05558f964..62bb11abcd 100644
--- a/app/templates/team/user.hbs
+++ b/app/templates/team/user.hbs
@@ -115,13 +115,12 @@
                     <div class="form-group">
                         <label for="user-role">Role</label>
                         <span class="gh-select" tabindex="0">
-                            {{one-way-select
-                                id="new-user-role"
-                                options=roles
+                            {{gh-select-native id="new-user-role"
+                                content=roles
                                 optionValuePath="id"
                                 optionLabelPath="name"
-                                value=model.role
-                                update=(action "changeRole")
+                                selection=model.role
+                                action="changeRole"
                             }}
                         </span>
                         <p>What permissions should this user have?</p>
diff --git a/tests/acceptance/editor-test.js b/tests/acceptance/editor-test.js
index a7428b380b..f603a907b4 100644
--- a/tests/acceptance/editor-test.js
+++ b/tests/acceptance/editor-test.js
@@ -208,7 +208,7 @@ describe('Acceptance: Editor', function() {
                 find('#activeTimezone option[value="Pacific/Kwajalein"]').prop('selected', true);
             });
 
-            triggerEvent('#activeTimezone', 'change');
+            triggerEvent('#activeTimezone select', 'change');
             // save the settings
             click('.view-header .btn.btn-blue');
 
diff --git a/tests/acceptance/settings/general-test.js b/tests/acceptance/settings/general-test.js
index 822caff265..4a42243956 100644
--- a/tests/acceptance/settings/general-test.js
+++ b/tests/acceptance/settings/general-test.js
@@ -135,12 +135,12 @@ describe('Acceptance: Settings - General', function () {
             andThen(() => {
                 expect(currentURL(), 'currentURL').to.equal('/settings/general');
 
-                expect(find('#activeTimezone option').length, 'available timezones').to.equal(66);
+                expect(find('#activeTimezone select option').length, 'available timezones').to.equal(66);
                 expect(find('#activeTimezone option:selected').text().trim()).to.equal('(GMT) UTC');
                 find('#activeTimezone option[value="Africa/Cairo"]').prop('selected', true);
             });
 
-            triggerEvent('#activeTimezone', 'change');
+            triggerEvent('#activeTimezone select', 'change');
             click('.view-header .btn.btn-blue');
 
             andThen(() => {
diff --git a/tests/unit/components/gh-select-native-test.js b/tests/unit/components/gh-select-native-test.js
new file mode 100644
index 0000000000..258a456345
--- /dev/null
+++ b/tests/unit/components/gh-select-native-test.js
@@ -0,0 +1,28 @@
+/* jshint expr:true */
+import {expect} from 'chai';
+import {
+    describeComponent,
+    it
+} from 'ember-mocha';
+
+describeComponent(
+    'gh-select-native',
+    'Unit: Component: gh-select-native',
+    {
+        unit: true
+        // specify the other units that are required for this test
+        // needs: ['component:foo', 'helper:bar']
+    },
+    function () {
+        it('renders', function () {
+            // creates the component instance
+            let component = this.subject();
+
+            expect(component._state).to.equal('preRender');
+
+            // renders the component on the page
+            this.render();
+            expect(component._state).to.equal('inDOM');
+        });
+    }
+);