FIX: Show tip for required selectable field on signup when not selected (#33401)

Dropdown and multiselect components lack `InputTip`, which makes them
not show any reason when validation fails.

This commit also adds a new i18n message for select fields, after this
commit, if a multiselect or dropdown custom field required has no option
selected, it will display a `Please select a value for "XX" field`
validation error when the Signup button is clicked.

app/assets/javascripts/discourse/app/components/user-fields/dropdown.gjs

@@ -1,4 +1,5 @@
 import { concat, fn, hash } from "@ember/helper";
+import InputTip from "discourse/components/input-tip";
 import htmlSafe from "discourse/helpers/html-safe";
 import { i18n } from "discourse-i18n";
 import ComboBox from "select-kit/components/combo-box";
@@ -25,7 +26,11 @@ export default class UserFieldDropdown extends UserFieldBase {
         @onChange={{fn (mut this.value)}}
         @options={{hash none=this.noneLabel}}
       />
-      <div class="instructions">{{htmlSafe this.field.description}}</div>
+      {{#if this.validation.failed}}
+        <InputTip @validation={{this.validation}} />
+      {{else}}
+        <div class="instructions">{{htmlSafe this.field.description}}</div>
+      {{/if}}
     </div>
   </template>
 }

app/assets/javascripts/discourse/app/components/user-fields/multiselect.gjs

@@ -1,4 +1,5 @@
 import { concat, fn, hash } from "@ember/helper";
+import InputTip from "discourse/components/input-tip";
 import htmlSafe from "discourse/helpers/html-safe";
 import { i18n } from "discourse-i18n";
 import MultiSelect from "select-kit/components/multi-select";
@@ -25,7 +26,11 @@ export default class UserFieldMultiselect extends UserFieldBase {
         @onChange={{fn (mut this.value)}}
         @options={{hash none=this.noneLabel}}
       />
-      <div class="instructions">{{htmlSafe this.field.description}}</div>
+      {{#if this.validation.failed}}
+        <InputTip @validation={{this.validation}} />
+      {{else}}
+        <div class="instructions">{{htmlSafe this.field.description}}</div>
+      {{/if}}
     </div>
   </template>
 }

app/assets/javascripts/discourse/app/lib/user-fields-validation-helper.js

@@ -43,7 +43,9 @@ class TrackedUserField {
       const reasonKey =
         this.field.field_type === "confirm"
           ? "user_fields.required_checkbox"
-          : "user_fields.required";
+          : this.field.field_type === "text"
+            ? "user_fields.required"
+            : "user_fields.required_select";
       validation = failedResult({
         reason: i18n(reasonKey, {
           name: this.field.name,

config/locales/client.en.yml

@@ -1257,6 +1257,7 @@ en:
     user_fields:
       none: "(select an option)"
       required: 'Please enter a value for "%{name}"'
+      required_select: 'Please select a value for "%{name}"'
       required_checkbox: 'The field "%{name}" is required'
       same_as_password: "Your password should not be repeated in other fields"
       optional: (optional)

spec/fabricators/user_field_fabricator.rb

@@ -7,3 +7,12 @@ Fabricator(:user_field) do
   editable true
   requirement "on_signup"
 end
+
+Fabricator(:user_field_dropdown, from: :user_field) do
+  field_type "dropdown"
+  after_create do |user_field|
+    Fabricate(:user_field_option, user_field: user_field)
+    Fabricate(:user_field_option, user_field: user_field)
+    Fabricate(:user_field_option, user_field: user_field)
+  end
+end

spec/system/signup_spec.rb

@@ -375,6 +375,23 @@ shared_examples "signup scenarios" do
       end
     end
   end
+
+  describe "user custom fields" do
+    it "shows tips if required but not selected" do
+      user_field_text = Fabricate(:user_field)
+      user_field_dropdown = Fabricate(:user_field_dropdown)
+
+      signup_form.open
+      find(".signup-page-cta__signup").click
+
+      expect(signup_form).to have_content(
+        I18n.t("js.user_fields.required", name: user_field_text.name),
+      )
+      expect(signup_form).to have_content(
+        I18n.t("js.user_fields.required_select", name: user_field_dropdown.name),
+      )
+    end
+  end
 end
 
 describe "Signup", type: :system do