From 5ad09f75644d5645c38adf09ea97e4f4c6948749 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 5 Dec 2024 13:52:22 +0100
Subject: [PATCH] DEV: adds default option to form-kit select (#30126)

This commit will now show a "Select..." option when no value selected and a "None" option when a value is selected, as the first row. It ensures that people don't think a value is selected when it's actually just the html select showing the first available option.
---
 .../form-kit/components/fk/control/select.gjs | 13 +++++++++
 .../components/create-invite-test.gjs         |  4 +--
 .../form-kit/controls/select-test.gjs         | 29 +++++++++++++++++++
 config/locales/client.en.yml                  |  3 ++
 4 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/select.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/select.gjs
index 3bd705bf069..812d67d8b2b 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control/select.gjs
+++ b/app/assets/javascripts/discourse/app/form-kit/components/fk/control/select.gjs
@@ -3,6 +3,7 @@ import { hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { NO_VALUE_OPTION } from "discourse/form-kit/lib/constants";
+import { i18n } from "discourse-i18n";
 import FKControlSelectOption from "./select/option";
 
 export default class FKControlSelect extends Component {
@@ -17,6 +18,10 @@ export default class FKControlSelect extends Component {
     );
   }
 
+  get hasSelectedValue() {
+    return this.args.field.value && this.args.field.value !== NO_VALUE_OPTION;
+  }
+
   <template>
     <select
       value={{@field.value}}
@@ -25,6 +30,14 @@ export default class FKControlSelect extends Component {
       class="form-kit__control-select"
       {{on "input" this.handleInput}}
     >
+      <FKControlSelectOption @value={{NO_VALUE_OPTION}}>
+        {{#if this.hasSelectedValue}}
+          {{i18n "form_kit.select.none_placeholder"}}
+        {{else}}
+          {{i18n "form_kit.select.select_placeholder"}}
+        {{/if}}
+      </FKControlSelectOption>
+
       {{yield
         (hash Option=(component FKControlSelectOption selected=@field.value))
       }}
diff --git a/app/assets/javascripts/discourse/tests/integration/components/create-invite-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/create-invite-test.gjs
index b5bdadc6cd8..f1d0a0b51c4 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/create-invite-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/create-invite-test.gjs
@@ -166,7 +166,7 @@ module("Integration | Component | CreateInvite", function (hooks) {
 
     assert.deepEqual(
       formKit().field("expiresAfterDays").options(),
-      ["1", "3", "7", "30", "90", "999999"],
+      ["__NONE__", "1", "3", "7", "30", "90", "999999"],
       "the value of invite_expiry_days is added to the dropdown"
     );
 
@@ -179,7 +179,7 @@ module("Integration | Component | CreateInvite", function (hooks) {
 
     assert.deepEqual(
       formKit().field("expiresAfterDays").options(),
-      ["1", "7", "30", "90", "999999"],
+      ["__NONE__", "1", "7", "30", "90", "999999"],
       "the value of invite_expiry_days is not added to the dropdown if it's already one of the options"
     );
   });
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/select-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/select-test.gjs
index f71e61ee9a5..1d15f2ad0a4 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/select-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/form-kit/controls/select-test.gjs
@@ -3,6 +3,7 @@ import { module, test } from "qunit";
 import Form from "discourse/components/form";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import formKit from "discourse/tests/helpers/form-kit-helper";
+import { i18n } from "discourse-i18n";
 
 module(
   "Integration | Component | FormKit | Controls | Select",
@@ -50,5 +51,33 @@ module(
 
       assert.dom(".form-kit__control-select").hasAttribute("disabled");
     });
+
+    test("no selection", async function (assert) {
+      await render(<template>
+        <Form as |form|>
+          <form.Field @name="foo" @title="Foo" as |field|>
+            <field.Select as |select|>
+              <select.Option @value="option-1">Option 1</select.Option>
+            </field.Select>
+          </form.Field>
+        </Form>
+      </template>);
+
+      assert
+        .dom(".form-kit__control-select option:nth-child(1)")
+        .hasText(
+          i18n("form_kit.select.select_placeholder"),
+          "it shows a placeholder for selection"
+        );
+
+      await formKit().field("foo").select("option-1");
+
+      assert
+        .dom(".form-kit__control-select option:nth-child(1)")
+        .hasText(
+          i18n("form_kit.select.none_placeholder"),
+          "it shows a placeholder for unselection"
+        );
+    });
   }
 );
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index bea05786a56..4d79d314e20 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2203,6 +2203,9 @@ en:
       optional: optional
       errors_summary_title: "This form contains errors:"
       dirty_form: "You didn't submit your changes! Are you sure you want to leave?"
+      select:
+        select_placeholder: "Select…"
+        none_placeholder: "None"
       errors:
         required: "Required"
         invalid_url: "Must be a valid URL"