DEV: Modernise mixed test direction text-field to avoid deprecation (#19056)

Previously we had a combination of a computed property and `this.set`. This was triggering the `computed-property.override` deprecation. This commit moves everything into the `dir` property, makes it a native getter, and adds a test to verify the reactive behavior.

app/assets/javascripts/discourse/app/components/text-field.js

@@ -53,12 +53,13 @@ export default TextField.extend({
     next(() => this.onChange(this.value));
   },
 
-  @discourseComputed
+  get dir() {
-  dir() {
     if (this.siteSettings.support_mixed_text_direction) {
-      let val = this.value;
+      const val = this.get("value");
-      if (val) {
+      if (val && isRTL(val)) {
-        return isRTL(val) ? "rtl" : "ltr";
+        return "rtl";
+      } else if (val && isLTR(val)) {
+        return "ltr";
       } else {
         return siteDir();
       }
@@ -70,21 +71,6 @@ export default TextField.extend({
     cancel(this._timer);
   },
 
-  keyUp(event) {
-    this._super(event);
-
-    if (this.siteSettings.support_mixed_text_direction) {
-      let val = this.value;
-      if (isRTL(val)) {
-        this.set("dir", "rtl");
-      } else if (isLTR(val)) {
-        this.set("dir", "ltr");
-      } else {
-        this.set("dir", siteDir());
-      }
-    }
-  },
-
   @discourseComputed("placeholderKey")
   placeholder: {
     get() {

app/assets/javascripts/discourse/tests/integration/components/text-field-test.js

@@ -40,6 +40,20 @@ module("Integration | Component | text-field", function (hooks) {
     assert.strictEqual(query("input").getAttribute("dir"), "ltr");
   });
 
+  test("updates the dir attribute when value changes", async function (assert) {
+    this.siteSettings.support_mixed_text_direction = true;
+
+    await render(
+      hbs`<TextField id="mytextfield" @value="This is a ltr title" />`
+    );
+
+    assert.strictEqual(query("input").getAttribute("dir"), "ltr");
+
+    await fillIn("#mytextfield", "זהו שם עברי עם מקום עברי");
+
+    assert.strictEqual(query("input").getAttribute("dir"), "rtl");
+  });
+
   test("supports onChange", async function (assert) {
     this.called = false;
     this.newValue = null;