From 80a362554a2a02bada09fcc1b562dc21c0d08272 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 4 Mar 2020 18:11:23 +0000
Subject: [PATCH] ui: Install ref modifier and use it instead of dom selecting
 (#7383)

---
 ui-v2/app/components/phrase-editor.js            | 5 -----
 ui-v2/app/components/toggle-button.js            | 7 -------
 ui-v2/app/templates/components/phrase-editor.hbs | 2 +-
 ui-v2/app/templates/components/toggle-button.hbs | 4 ++--
 ui-v2/package.json                               | 1 +
 ui-v2/yarn.lock                                  | 7 +++++++
 6 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/ui-v2/app/components/phrase-editor.js b/ui-v2/app/components/phrase-editor.js
index 6a18652da..bea454784 100644
--- a/ui-v2/app/components/phrase-editor.js
+++ b/ui-v2/app/components/phrase-editor.js
@@ -6,11 +6,6 @@ export default Component.extend({
   dom: service('dom'),
   classNames: ['phrase-editor'],
   item: '',
-  didInsertElement: function() {
-    this._super(...arguments);
-    // TODO: use {{ref}}
-    this.input = this.dom.element('input', this.element);
-  },
   onchange: function(e) {},
   search: function(e) {
     // TODO: Temporarily continue supporting `searchable`
diff --git a/ui-v2/app/components/toggle-button.js b/ui-v2/app/components/toggle-button.js
index 9ead01679..78edb4348 100644
--- a/ui-v2/app/components/toggle-button.js
+++ b/ui-v2/app/components/toggle-button.js
@@ -1,6 +1,5 @@
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
-import { set } from '@ember/object';
 
 export default Component.extend({
   dom: service('dom'),
@@ -19,12 +18,6 @@ export default Component.extend({
     this.guid = this.dom.guid(this);
     this._listeners = this.dom.listeners();
   },
-  didInsertElement: function() {
-    this._super(...arguments);
-    // TODO(octane): move to ref
-    set(this, 'input', this.dom.element(`#toggle-button-${this.guid}`));
-    set(this, 'label', this.input.nextElementSibling);
-  },
   willDestroyElement: function() {
     this._super(...arguments);
     this._listeners.remove();
diff --git a/ui-v2/app/templates/components/phrase-editor.hbs b/ui-v2/app/templates/components/phrase-editor.hbs
index d0e8d5e74..b03553df2 100644
--- a/ui-v2/app/templates/components/phrase-editor.hbs
+++ b/ui-v2/app/templates/components/phrase-editor.hbs
@@ -7,5 +7,5 @@
   </ul>
   <label class="type-search">
     <span>Search</span>
-    <input onchange={{action 'add'}} onsearch={{action 'add'}} oninput={{action 'input'}} onkeydown={{action 'keydown'}} placeholder={{if (eq value.length 0) placeholder}} value={{item}} type="search" name="s" autofocus="autofocus" />
+    <input {{ref this "input"}} onchange={{action 'add'}} onsearch={{action 'add'}} oninput={{action 'input'}} onkeydown={{action 'keydown'}} placeholder={{if (eq value.length 0) placeholder}} value={{item}} type="search" name="s" autofocus="autofocus" />
   </label>
\ No newline at end of file
diff --git a/ui-v2/app/templates/components/toggle-button.hbs b/ui-v2/app/templates/components/toggle-button.hbs
index 5ed486153..ddb47144d 100644
--- a/ui-v2/app/templates/components/toggle-button.hbs
+++ b/ui-v2/app/templates/components/toggle-button.hbs
@@ -1,4 +1,4 @@
-<input type="checkbox" checked={{if checked 'checked' undefined}} id={{concat 'toggle-button-' guid}} onchange={{action 'change'}} />
-<label for={{concat 'toggle-button-' guid}}>
+<input {{ref this "input"}} type="checkbox" checked={{if checked 'checked' undefined}} id={{concat 'toggle-button-' guid}} onchange={{action 'change'}} />
+<label {{ref this "label"}} for={{concat 'toggle-button-' guid}}>
   {{yield (action 'click')}}
 </label>
\ No newline at end of file
diff --git a/ui-v2/package.json b/ui-v2/package.json
index 7f8e33b48..e8b59c298 100644
--- a/ui-v2/package.json
+++ b/ui-v2/package.json
@@ -100,6 +100,7 @@
     "ember-power-select": "^3.0.6",
     "ember-power-select-with-create": "^0.7.0",
     "ember-qunit": "^4.6.0",
+    "ember-ref-modifier": "^1.0.0",
     "ember-resolver": "^7.0.0",
     "ember-sinon-qunit": "4.0.1",
     "ember-source": "~3.16.0",
diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock
index 6ad5e4763..174c29d06 100644
--- a/ui-v2/yarn.lock
+++ b/ui-v2/yarn.lock
@@ -5780,6 +5780,13 @@ ember-qunit@^4.6.0:
     ember-cli-test-loader "^2.2.0"
     qunit "^2.9.3"
 
+ember-ref-modifier@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ember-ref-modifier/-/ember-ref-modifier-1.0.0.tgz#3e98d8c26eda7cf4da4b2d82d6a0c80c5058efed"
+  integrity sha512-JPCwlKerzZCbc5GO01xcgRJv5JcK1O61FF5PE6UxMNRwgDxT33mjTPO2JFhn4HGoG0NvpnkpLLxw+qf1KuX8kw==
+  dependencies:
+    ember-cli-babel "^7.13.2"
+
 ember-require-module@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/ember-require-module/-/ember-require-module-0.3.0.tgz#65aff7908b5b846467e4526594d33cfe0c23456b"