DEV: Introduce a helper for handling events (#25433)

Instead of

```hbs
{{on "input" (action this.foo value="target.value")}}
{{on "input" (action (mut this.bar) value="target.value")}}
```

you can use:

```hbs
{{on "input" (with-event-value this.foo)}}
{{on "input" (with-event-value (fn (mut this.bar)))}}
```

or in gjs:

```gjs
import { fn } from "@ember/helper";
import { on } from "@ember/modifier";
import withEventValue from "discourse/helpers/with-event-value";
…
{{on "input" (withEventValue (fn (mut this.bar)))}}
```

app/assets/javascripts/admin/addon/components/site-settings/integer.hbs

@@ -1,5 +1,5 @@
 <input
-  {{on "input" (action (mut this.value) value="target.value")}}
+  {{on "input" (with-event-value (fn (mut this.value)))}}
   type="number"
   value={{this.value}}
   min={{if this.setting.min this.setting.min null}}

app/assets/javascripts/admin/addon/templates/dashboard_reports.hbs

@@ -6,7 +6,7 @@
         class="filter-reports-input"
         placeholder={{i18n "admin.dashboard.filter_reports"}}
         autofocus={{true}}
-        {{on "input" (action "filterReports" value="target.value")}}
+        {{on "input" (with-event-value this.filterReports)}}
       />
     </div>
 

app/assets/javascripts/discourse/app/components/edit-category-settings.hbs

@@ -5,10 +5,7 @@
         {{i18n "category.position"}}
       </label>
       <input
-        {{on
+        {{on "input" (with-event-value (fn (mut this.category.position)))}}
-          "input"
-          (action (mut this.category.position) value="target.value")
-        }}
         value={{this.category.position}}
         type="number"
         min="0"
@@ -42,7 +39,7 @@
     <input
       {{on
         "input"
-        (action (mut this.category.num_featured_topics) value="target.value")
+        (with-event-value (fn (mut this.category.num_featured_topics)))
       }}
       value={{this.category.num_featured_topics}}
       type="number"
@@ -197,9 +194,8 @@
     <input
       {{on
         "input"
-        (action
+        (with-event-value
-          (mut this.category.category_setting.num_auto_bump_daily)
+          (fn (mut this.category.category_setting.num_auto_bump_daily))
-          value="target.value"
         )
       }}
       value={{this.category.category_setting.num_auto_bump_daily}}
@@ -216,9 +212,8 @@
     <input
       {{on
         "input"
-        (action
+        (with-event-value
-          (mut this.category.category_setting.auto_bump_cooldown_days)
+          (fn (mut this.category.category_setting.auto_bump_cooldown_days))
-          value="target.value"
         )
       }}
       value={{this.category.category_setting.auto_bump_cooldown_days}}

app/assets/javascripts/discourse/app/components/emoji-uploader.hbs

@@ -9,7 +9,7 @@
         name="name"
         placeholder={{i18n "admin.emoji.name"}}
         @value={{readonly this.name}}
-        {{on "input" (action (mut this.name) value="target.value")}}
+        {{on "input" (with-event-value (fn (mut this.name)))}}
       />
     </div>
   </div>

app/assets/javascripts/discourse/app/components/future-date-input.hbs

@@ -33,7 +33,7 @@
         class="time-input"
         @value={{this._time}}
         disabled={{this.timeInputDisabled}}
-        {{on "input" (action "onChangeTime" value="target.value")}}
+        {{on "input" (with-event-value this.onChangeTime)}}
       />
     </div>
   {{/if}}

app/assets/javascripts/discourse/app/components/modal/reorder-categories.hbs

@@ -22,10 +22,7 @@
             <td>
               <div class="reorder-categories-actions">
                 <input
-                  {{on
+                  {{on "change" (with-event-value (fn this.change entry))}}
-                    "change"
-                    (action (fn this.change entry) value="target.value")
-                  }}
                   value={{entry.position}}
                   type="number"
                   min="0"

app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs

@@ -21,7 +21,7 @@
             id="section-name"
             {{on
               "input"
-              (action (mut this.transformedModel.title) value="target.value")
+              (with-event-value (fn (mut this.transformedModel.title)))
             }}
           />
 

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

@@ -10,7 +10,7 @@ export default TextField.extend({
   init() {
     this._super(...arguments);
     deprecated(
-      `NumberField component is deprecated. Use native <input> elements instead.\ne.g. <input {{on "input" (action (mut this.value) value="target.value")}} type="number" value={{this.value}} />`,
+      `NumberField component is deprecated. Use native <input> elements instead.\ne.g. <input {{on "input" (with-event-value (fn (mut this.value)))}} type="number" value={{this.value}} />`,
       {
         id: "discourse.number-field",
         since: "3.2.0.beta5",

app/assets/javascripts/discourse/app/components/search-advanced-options.hbs

@@ -246,10 +246,7 @@
           id="search-min-post-count"
           placeholder={{i18n "search.advanced.post.min.placeholder"}}
           aria-label={{i18n "search.advanced.post.min.aria_label"}}
-          {{on
+          {{on "input" (with-event-value this.onChangeSearchTermMinPostCount)}}
-            "input"
-            (action "onChangeSearchTermMinPostCount" value="target.value")
-          }}
         />
         {{d-icon "arrows-alt-h"}}
         <Input
@@ -259,10 +256,7 @@
           id="search-max-post-count"
           placeholder={{i18n "search.advanced.post.max.placeholder"}}
           aria-label={{i18n "search.advanced.post.max.aria_label"}}
-          {{on
+          {{on "input" (with-event-value this.onChangeSearchTermMaxPostCount)}}
-            "input"
-            (action "onChangeSearchTermMaxPostCount" value="target.value")
-          }}
         />
       </div>
     </div>
@@ -278,10 +272,7 @@
           id="search-min-views"
           placeholder={{i18n "search.advanced.min_views.placeholder"}}
           aria-label={{i18n "search.advanced.min_views.aria_label"}}
-          {{on
+          {{on "input" (with-event-value this.onChangeSearchTermMinViews)}}
-            "input"
-            (action "onChangeSearchTermMinViews" value="target.value")
-          }}
         />
         {{d-icon "arrows-alt-h"}}
         <Input
@@ -291,10 +282,7 @@
           id="search-max-views"
           placeholder={{i18n "search.advanced.max_views.placeholder"}}
           aria-label={{i18n "search.advanced.max_views.aria_label"}}
-          {{on
+          {{on "input" (with-event-value this.onChangeSearchTermMaxViews)}}
-            "input"
-            (action "onChangeSearchTermMaxViews" value="target.value")
-          }}
         />
       </div>
     </div>

app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs

@@ -47,7 +47,7 @@
       @value={{@link.name}}
       class={{@link.nameCssClass}}
       ariaLabel={{i18n "sidebar.sections.custom.links.name.label"}}
-      {{on "input" (action (mut @link.name) value="target.value")}}
+      {{on "input" (with-event-value (fn (mut @link.name)))}}
     />
     {{#if @link.invalidNameMessage}}
       <div class="name warning">
@@ -62,7 +62,7 @@
       @value={{@link.value}}
       class={{@link.valueCssClass}}
       ariaLabel={{i18n "sidebar.sections.custom.links.value.label"}}
-      {{on "input" (action (mut @link.value) value="target.value")}}
+      {{on "input" (with-event-value (fn (mut @link.value)))}}
     />
     {{#if @link.invalidValueMessage}}
       <div class="value warning">

app/assets/javascripts/discourse/app/components/tag-info.hbs

@@ -7,7 +7,7 @@
             @id="edit-name"
             @value={{readonly this.tagInfo.name}}
             @maxlength={{this.siteSettings.max_tag_length}}
-            @input={{action (mut this.newTagName) value="target.value"}}
+            @input={{with-event-value (fn (mut this.newTagName))}}
             @autofocus="true"
           />
 
@@ -16,10 +16,7 @@
             @value={{readonly this.tagInfo.descriptionWithNewLines}}
             placeholder={{i18n "tagging.description"}}
             maxlength={{1000}}
-            {{on
+            {{on "input" (with-event-value (fn (mut this.newTagDescription)))}}
-              "input"
-              (action (mut this.newTagDescription) value="target.value")
-            }}
             autofocus="true"
           />
 

app/assets/javascripts/discourse/app/helpers/with-event-value.js

@@ -0,0 +1,7 @@
+import { get } from "@ember/object";
+
+export default function withEventValue(mutFn) {
+  return function (event) {
+    return mutFn(get(event, "target.value"));
+  };
+}

app/assets/javascripts/discourse/app/templates/groups/index.hbs

@@ -22,7 +22,7 @@
         @value={{readonly this.filter}}
         placeholder={{i18n "groups.index.all"}}
         class="groups-header-filters-name no-blur"
-        {{on "input" (action "onFilterChanged" value="target.value")}}
+        {{on "input" (with-event-value this.onFilterChanged)}}
         @type="search"
         aria-description={{i18n "groups.index.search_results"}}
       />

app/assets/javascripts/discourse/app/templates/users.hbs

@@ -41,10 +41,7 @@
               @value={{readonly this.nameInput}}
               placeholder={{i18n "directory.filter_name"}}
               class="filter-name no-blur"
-              {{on
+              {{on "input" (with-event-value this.onUsernameFilterChanged)}}
-                "input"
-                (action "onUsernameFilterChanged" value="target.value")
-              }}
             />
             {{#if this.showGroupFilter}}
               <ComboBox

app/assets/javascripts/discourse/tests/integration/components/char-counter-test.js

@@ -20,9 +20,14 @@ module("Integration | Component | char-counter", function (hooks) {
   test("updating value updates counter", async function (assert) {
     this.max = 50;
 
-    await render(
+    await render(hbs`
-      hbs`<CharCounter @value={{this.charCounterContent}} @max={{this.max}}><textarea {{on "input" (action (mut this.charCounterContent) value="target.value")}}></textarea></CharCounter>`
+      <CharCounter
-    );
+        @value={{this.charCounterContent}}
+        @max={{this.max}}
+      >
+        <textarea {{on "input" (with-event-value (fn (mut this.charCounterContent)))}}></textarea>
+      </CharCounter>
+    `);
 
     assert
       .dom(this.element)

plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs

@@ -25,7 +25,7 @@
           )
         }}
         @value={{this.chatEmojiPickerManager.picker.initialFilter}}
-        @filterAction={{action this.didInputFilter value="target.value"}}
+        @filterAction={{with-event-value this.didInputFilter}}
         @icons={{hash left="search"}}
         @containerClass="chat-emoji-picker__filter"
         autofocus={{true}}

plugins/chat/assets/javascripts/discourse/components/chat/modal/create-channel.hbs

@@ -17,7 +17,7 @@
         class="chat-modal-create-channel__input"
         @type="text"
         @value={{this.name}}
-        {{on "input" (action this.onNameChange value="target.value")}}
+        {{on "input" (with-event-value this.onNameChange)}}
       />
     </div>
 

plugins/chat/assets/javascripts/discourse/components/chat/modal/edit-channel-description.hbs

@@ -14,10 +14,7 @@
       @max={{this.descriptionMaxLength}}
     >
       <textarea
-        {{on
+        {{on "input" (with-event-value this.onChangeChatChannelDescription)}}
-          "input"
-          (action this.onChangeChatChannelDescription value="target.value")
-        }}
         class="chat-modal-edit-channel-description__description-input"
         placeholder={{i18n
           "chat.channel_edit_description_modal.input_placeholder"

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/char-counter.hbs

@@ -1,10 +1,7 @@
 <StyleguideExample @title="<CharCounter>">
   <CharCounter @max="50" @value={{@dummy.charCounterContent}}>
     <textarea
-      {{on
+      {{on "input" (with-event-value (fn (mut @dummy.charCounterContent)))}}
-        "input"
-        (action (mut @dummy.charCounterContent) value="target.value")
-      }}
       class="styleguide--char-counter"
     ></textarea>
   </CharCounter>