From a193c1e5501a06b6d386bba2e4ade2da1c850263 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Fri, 18 Oct 2024 16:59:39 +0100
Subject: [PATCH] Add form support to `Select`

---
 packages/primevue/src/select/BaseSelect.vue   | 21 ++----------
 packages/primevue/src/select/Select.vue       | 34 ++++++++-----------
 .../primevue/src/select/style/SelectStyle.js  |  8 ++---
 3 files changed, 21 insertions(+), 42 deletions(-)

diff --git a/packages/primevue/src/select/BaseSelect.vue b/packages/primevue/src/select/BaseSelect.vue
index 9d7a4c4be..4e70e4f53 100644
--- a/packages/primevue/src/select/BaseSelect.vue
+++ b/packages/primevue/src/select/BaseSelect.vue
@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import SelectStyle from 'primevue/select/style';
 
 export default {
     name: 'BaseSelect',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
-        modelValue: null,
         options: Array,
         optionLabel: [String, Function],
         optionValue: [String, Function],
@@ -33,27 +32,11 @@ export default {
             type: String,
             default: null
         },
-        variant: {
-            type: String,
-            default: null
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         dataKey: null,
         showClear: {
             type: Boolean,
             default: false
         },
-        fluid: {
-            type: Boolean,
-            default: null
-        },
         inputId: {
             type: String,
             default: null
diff --git a/packages/primevue/src/select/Select.vue b/packages/primevue/src/select/Select.vue
index b1e0bf0d6..a0b7b3c90 100755
--- a/packages/primevue/src/select/Select.vue
+++ b/packages/primevue/src/select/Select.vue
@@ -46,7 +46,7 @@
             @keydown="onKeyDown"
             v-bind="ptm('label')"
         >
-            <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label ?? 'empty' }}</slot>
+            <slot name="value" :value="d_value" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label ?? 'empty' }}</slot>
         </span>
         <slot v-if="isClearIconVisible" name="clearicon" :class="cx('clearIcon')" :clearCallback="onClearClick">
             <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="ptm('clearIcon')" data-pc-section="clearicon" />
@@ -74,7 +74,7 @@
                         :data-p-hidden-accessible="true"
                         :data-p-hidden-focusable="true"
                     ></span>
-                    <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
+                    <slot name="header" :value="d_value" :options="visibleOptions"></slot>
                     <div v-if="filter" :class="cx('header')" v-bind="ptm('header')">
                         <IconField :unstyled="unstyled" :pt="ptm('pcFilterContainer')">
                             <InputText
@@ -165,7 +165,7 @@
                             </template>
                         </VirtualScroller>
                     </div>
-                    <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
+                    <slot name="footer" :value="d_value" :options="visibleOptions"></slot>
                     <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
                         {{ emptyMessageText }}
                     </span>
@@ -191,7 +191,7 @@
 
 <script>
 import { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isAndroid, isTouchDevice, isVisible, relativePosition } from '@primeuix/utils/dom';
-import { equals, findLastIndex, isEmpty, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
+import { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
 import { FilterService } from '@primevue/core/api';
 import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
@@ -214,10 +214,7 @@ export default {
     name: 'Select',
     extends: BaseSelect,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
-    inject: {
-        $pcFluid: { default: null }
-    },
+    emits: ['change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
     outsideClickListener: null,
     scrollHandler: null,
     resizeListener: null,
@@ -358,6 +355,7 @@ export default {
             this.focusedOptionIndex = -1;
             this.searchValue = '';
             this.$emit('blur', event);
+            this.formField.onBlur?.();
         },
         onKeyDown(event) {
             if (this.disabled || isAndroid()) {
@@ -810,7 +808,7 @@ export default {
             return this.isValidOption(option) && this.isSelected(option);
         },
         isSelected(option) {
-            return equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
+            return equals(this.d_value, this.getOptionValue(option), this.equalityKey);
         },
         findFirstOptionIndex() {
             return this.visibleOptions.findIndex((option) => this.isValidOption(option));
@@ -829,7 +827,7 @@ export default {
             return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
         findSelectedOptionIndex() {
-            return this.hasSelectedOption ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
+            return this.$filled ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;
         },
         findFirstFocusedOptionIndex() {
             const selectedIndex = this.findSelectedOptionIndex();
@@ -902,13 +900,13 @@ export default {
             });
         },
         autoUpdateModel() {
-            if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
+            if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {
                 this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
                 this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);
             }
         },
         updateModel(event, value) {
-            this.$emit('update:modelValue', value);
+            this.updateValue(value, event);
             this.$emit('change', { originalEvent: event, value });
         },
         flatOptions(options) {
@@ -959,8 +957,9 @@ export default {
 
             return options;
         },
+        // @deprecated use $filled instead
         hasSelectedOption() {
-            return isNotEmpty(this.modelValue);
+            return this.$filled;
         },
         label() {
             const selectedOptionIndex = this.findSelectedOptionIndex();
@@ -970,7 +969,7 @@ export default {
         editableInputValue() {
             const selectedOptionIndex = this.findSelectedOptionIndex();
 
-            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.modelValue || '';
+            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.d_value || '';
         },
         equalityKey() {
             return this.optionValue ? null : this.dataKey;
@@ -997,7 +996,7 @@ export default {
             return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';
         },
         selectedMessageText() {
-            return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
+            return this.$filled ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
         },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
@@ -1006,13 +1005,10 @@ export default {
             return this.visibleOptions.filter((option) => !this.isOptionGroup(option)).length;
         },
         isClearIconVisible() {
-            return this.showClear && this.modelValue != null && isNotEmpty(this.options);
+            return this.showClear && this.d_value != null && isNotEmpty(this.options);
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
-        },
-        hasFluid() {
-            return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
         }
     },
     directives: {
diff --git a/packages/primevue/src/select/style/SelectStyle.js b/packages/primevue/src/select/style/SelectStyle.js
index f87c6f129..5c4e5f760 100644
--- a/packages/primevue/src/select/style/SelectStyle.js
+++ b/packages/primevue/src/select/style/SelectStyle.js
@@ -202,13 +202,13 @@ const classes = {
         'p-select p-component p-inputwrapper',
         {
             'p-disabled': props.disabled,
-            'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
+            'p-invalid': instance.$invalid,
+            'p-variant-filled': instance.$variant === 'filled',
             'p-focus': state.focused,
-            'p-inputwrapper-filled': instance.hasSelectedOption,
+            'p-inputwrapper-filled': instance.$filled,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,
             'p-select-open': state.overlayVisible,
-            'p-select-fluid': instance.hasFluid
+            'p-select-fluid': instance.$fluid
         }
     ],
     label: ({ instance, props }) => [