ui: Install ref modifier and use it instead of dom selecting (#7383)

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`

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();

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>

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'}} />
+<input {{ref this "input"}} type="checkbox" checked={{if checked 'checked' undefined}} id={{concat 'toggle-button-' guid}} onchange={{action 'change'}} />
-<label for={{concat 'toggle-button-' guid}}>
+<label {{ref this "label"}} for={{concat 'toggle-button-' guid}}>
   {{yield (action 'click')}}
 </label>

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",

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"