fix: LanguageDropdown not displaying the label correctly when a tag l…

…anguage is set

js/src/forum/extendSubscriptionModal.js

@@ -2,25 +2,30 @@ import app from 'flarum/forum/app';
 import { extend } from 'flarum/common/extend';
 import { components } from '@fof-follow-tags';
 import LanguageDropdown from './components/LanguageDropdown';
+import Stream from 'flarum/common/utils/Stream';
 
 const SUBSCRIPTION_LANGUAGE_PRIORITY = 80;
 
 export default function extendSubscriptionModal() {
   if (!('fof-follow-tags' in flarum.extensions)) return;
 
   extend(components.SubscriptionModal.prototype, 'oninit', function () {
-    const tag = this.attrs.model;
-    const subscriptionLanguage = tag.subscriptionLanguage();
+    this.language = Stream();
 
     const showAnyLangOption = app.forum.attribute('fof-discussion-language.showAnyLangOpt');
 
     this.additionalLanguages = showAnyLangOption ? { any: app.translator.trans('fof-discussion-language.forum.index_language.any') } : {};
-
     this.defaultLanguage = showAnyLangOption ? 'any' : app.translator.formatter.locale;
+  });
+
+  extend(components.SubscriptionModal.prototype, 'oncreate', function () {
+    const tag = this.attrs.model;
+    const subscriptionLanguage = tag.subscriptionLanguage();
 
-    // Check if tag.subscriptionLanguage() is set, and assign accordingly
-    this.language = subscriptionLanguage || this.defaultLanguage;
-    console.log(this.language);
+    // For some reason, having this here in `oncreate` works, but we get unexpected bahviour if we put it in `oninit`.
+    // It's only an issue when `subscriptionLanguage` is not empty/null.
+    // TODO: investigate further at some point.
+    this.language = Stream(subscriptionLanguage || this.defaultLanguage);
   });
 
   extend(components.SubscriptionModal.prototype, 'formOptionItems', function (items) {
@@ -32,10 +37,9 @@ export default function extendSubscriptionModal() {
         <LanguageDropdown
           extra={this.additionalLanguages}
           default={this.defaultLanguage}
-          selected={this.language}
+          selected={this.language()}
           onclick={(code) => {
-            this.language = code;
-            console.log(this.language);
+            this.language(code);
             m.redraw();
           }}
         />
@@ -45,7 +49,7 @@ export default function extendSubscriptionModal() {
   });
 
   extend(components.SubscriptionModal.prototype, 'requestData', function (data) {
-    data.language = this.language;
+    data.language = this.language();
 
     return data;
   });