From bf974b699263fc60475c1c16cfe1372c7530ddf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Wed, 3 Jul 2024 15:04:58 +0200
Subject: [PATCH] pkp/pkp-lib#9658 Add large support for FieldSelect to be
 consistent with text inputs on invitation pages

---
 src/components/Form/fields/FieldSelect.vue    | 20 ++++++++++++++++++-
 .../Form/mocks/field-select-country.js        |  1 +
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/Form/fields/FieldSelect.vue b/src/components/Form/fields/FieldSelect.vue
index 2ee3c650f..8fe4bd1e7 100644
--- a/src/components/Form/fields/FieldSelect.vue
+++ b/src/components/Form/fields/FieldSelect.vue
@@ -41,6 +41,7 @@
 				:id="controlId"
 				v-model="currentValue"
 				class="pkpFormField__input pkpFormField--select__input"
+				:class="inputClasses"
 				:name="localizedName"
 				:aria-describedby="describedByIds"
 				:aria-invalid="errors && errors.length"
@@ -78,8 +79,21 @@ export default {
 	props: {
 		/**   An optional object containing preset information. When preset information exists, a button will appear in the toolbar. */
 		options: Array,
+		/** One of `small`, `normal` or `large`. Default: `normal`. */
+		size: {
+			default: 'normal',
+			validator: function (value) {
+				return ['normal', 'large'].indexOf(value) !== -1;
+			},
+		},
 	},
+
 	computed: {
+		inputClasses() {
+			let classes = ['pkpFormField--select__input--size' + this.size];
+			return classes;
+		},
+
 		/**
 		 * Get localized set of options
 		 *
@@ -95,10 +109,14 @@ export default {
 <style lang="less">
 @import '../../../styles/_import';
 
-.pkpFormField--select__input {
+.pkpFormField--select__input--sizenormal {
 	width: 20em;
 }
 
+.pkpFormField--select__input--sizelarge {
+	width: 100%;
+}
+
 .pkpFormField--select__input:-moz-focusring {
 	color: transparent;
 	text-shadow: 0 0 0 @text;
diff --git a/src/components/Form/mocks/field-select-country.js b/src/components/Form/mocks/field-select-country.js
index 651e6ec42..43a4856ff 100644
--- a/src/components/Form/mocks/field-select-country.js
+++ b/src/components/Form/mocks/field-select-country.js
@@ -2,6 +2,7 @@ export default {
 	name: 'country',
 	component: 'field-select',
 	label: 'Country',
+	size: 'normal',
 	options: [
 		{
 			value: '',