diff --git a/app/assets/javascripts/discourse/components/choose-topic.js.es6 b/app/assets/javascripts/discourse/components/choose-topic.js.es6 index d612b0fc7b5..4ee45b5eee4 100644 --- a/app/assets/javascripts/discourse/components/choose-topic.js.es6 +++ b/app/assets/javascripts/discourse/components/choose-topic.js.es6 @@ -1,34 +1,44 @@ import debounce from "discourse/lib/debounce"; import { searchForTerm } from "discourse/lib/search"; +import { observes } from "ember-addons/ember-computed-decorators"; export default Ember.Component.extend({ loading: null, noResults: null, topics: null, + selectedTopicId: null, + currentTopicId: null, + topicTitle: null, - topicTitleChanged: function() { + @observes("topicTitle") + topicTitleChanged() { this.setProperties({ loading: true, noResults: true, selectedTopicId: null }); - this.search(this.topicTitle); - }.observes("topicTitle"), - topicsChanged: function() { - const topics = this.topics; - if (topics) { - this.set("noResults", topics.length === 0); + this.search(this.topicTitle); + }, + + @observes("topics") + topicsChanged() { + if (this.topics) { + this.set("noResults", this.topics.length === 0); } + this.set("loading", false); - }.observes("topics"), + }, search: debounce(function(title) { - const self = this, - currentTopicId = this.currentTopicId; + if (!this.element || this.isDestroying || this.isDestroyed) { + return; + } + + const currentTopicId = this.currentTopicId; if (Ember.isEmpty(title)) { - self.setProperties({ topics: null, loading: false }); + this.setProperties({ topics: null, loading: false }); return; } @@ -36,27 +46,24 @@ export default Ember.Component.extend({ typeFilter: "topic", searchForId: true, restrictToArchetype: "regular" - }).then(function(results) { + }).then(results => { if (results && results.posts && results.posts.length > 0) { - self.set( + this.set( "topics", - results.posts - .mapBy("topic") - .filter(t => t.get("id") !== currentTopicId) + results.posts.mapBy("topic").filter(t => t.id !== currentTopicId) ); } else { - self.setProperties({ topics: null, loading: false }); + this.setProperties({ topics: null, loading: false }); } }); }, 300), actions: { chooseTopic(topic) { - const topicId = Ember.get(topic, "id"); - this.set("selectedTopicId", topicId); - Ember.run.next(() => - $("#choose-topic-" + topicId).prop("checked", "true") - ); + this.set("selectedTopicId", topic.id); + Ember.run.next(() => { + document.getElementById(`choose-topic-${topic.id}`).checked = true; + }); return false; } }