From 913853e3bf2f76812dd2ae6d2edb5e9112fb607f Mon Sep 17 00:00:00 2001
From: Carol Soliman <17387510+carsoli@users.noreply.github.com>
Date: Mon, 30 May 2022 20:05:28 +0200
Subject: [PATCH] fix(KtField*Select): implemented maximumSelectable properly

- disable the rest of the options on multi-select if maximumSelectable is reached
- feat: show `isUnsorted` prop on documentation
- fix: `isInputVisible` by moving the input out of screen instead
  - this is to properly support tabbing into (focus) when the dropdown is closed
  - we can't tab/focus into a field if there's no input
- fix: open the dropdown if the user starts typing into the field
  - in single selects, when user selects an option, the dropdown closes
  - the input still exists in the focused field yet the dropdown is closed
  - if the user starts typing, we open the dropdown again
  - it's an edge case that had weird UX previously
- fix: horizontal scrollbar UI

Co-Authored-By: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com>
---
 .../pages/usage/components/form-fields.vue    | 53 +++++++++---
 .../kotti-ui/source/kotti-avatar/KtAvatar.vue |  4 +-
 .../kotti-field-select/KtFieldMultiSelect.vue |  4 +-
 .../KtFieldMultiSelectRemote.vue              |  4 +-
 .../KtFieldSingleSelect.vue                   |  4 +-
 .../KtFieldSingleSelectRemote.vue             |  4 +-
 .../components/ActionIcon.vue                 | 14 ++--
 .../components/GenericSelectField.vue         | 83 ++++++++++++-------
 .../kotti-field-select/components/Options.vue | 43 ++++++----
 .../components/OptionsItem.vue                |  5 +-
 .../hooks/use-select-tippy.ts                 |  5 +-
 .../source/kotti-field-select/types.ts        |  4 +-
 .../kotti-ui/source/kotti-field/mixins.scss   |  1 +
 .../source/kotti-filters/KtFilters.vue        |  5 +-
 14 files changed, 145 insertions(+), 88 deletions(-)

diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
index afcbab1030..3ad2c7c5ff 100644
--- a/packages/documentation/pages/usage/components/form-fields.vue
+++ b/packages/documentation/pages/usage/components/form-fields.vue
@@ -234,7 +234,7 @@
 								<template #option="{ option }">
 									<i
 										class="yoco"
-										style="font-size: 24px; margin-right: 10px"
+										style="margin-right: 10px; font-size: 24px"
 										v-text="option.value"
 									/>
 									<span v-text="option.label" />
@@ -251,7 +251,7 @@
 								<template #option="{ option }">
 									<i
 										class="yoco"
-										style="font-size: 24px; margin-right: 10px"
+										style="margin-right: 10px; font-size: 24px"
 										v-text="option.value"
 									/>
 									<span v-text="option.label" />
@@ -391,6 +391,15 @@
 								label="isLoadingOptions"
 								type="switch"
 							/>
+							<KtFieldToggle
+								v-if="
+									componentDefinition.additionalProps.includes('isUnsorted')
+								"
+								formKey="isUnsorted"
+								isOptional
+								label="isUnsorted"
+								type="switch"
+							/>
 							<KtFieldDate
 								v-if="
 									componentDefinition.additionalProps.includes('maximumDate')
@@ -563,8 +572,9 @@ const components: Array<{
 		additionalProps: [
 			'actions',
 			'collapseTagsAfter',
-			'maximumSelectable',
 			'hasOptionSlot',
+			'isUnsorted',
+			'maximumSelectable',
 		],
 		formKey: 'multiSelectValue',
 		name: 'KtFieldMultiSelect',
@@ -574,9 +584,10 @@ const components: Array<{
 		additionalProps: [
 			'actions',
 			'collapseTagsAfter',
+			'hasOptionSlot',
 			'isLoadingOptions',
+			'isUnsorted',
 			'maximumSelectable',
-			'hasOptionSlot',
 			'query',
 		],
 		formKey: 'multiSelectValue',
@@ -609,13 +620,19 @@ const components: Array<{
 		supports: KtFieldRadioGroup.meta.supports,
 	},
 	{
-		additionalProps: ['actions', 'hasOptionSlot'],
+		additionalProps: ['actions', 'hasOptionSlot', 'isUnsorted'],
 		formKey: 'singleSelectValue',
 		name: 'KtFieldSingleSelect',
 		supports: KtFieldSingleSelect.meta.supports,
 	},
 	{
-		additionalProps: ['actions', 'isLoadingOptions', 'hasOptionSlot', 'query'],
+		additionalProps: [
+			'actions',
+			'hasOptionSlot',
+			'isLoadingOptions',
+			'isUnsorted',
+			'query',
+		],
 		formKey: 'singleSelectValue',
 		name: 'KtFieldSingleSelectRemote',
 		supports: KtFieldSingleSelectRemote.meta.supports,
@@ -705,15 +722,15 @@ const radioGroupOptions: Kotti.FieldRadioGroup.Props['options'] = [
 ]
 
 const singleOrMultiSelectOptions: Kotti.FieldSingleSelect.Props['options'] = [
-	{ label: 'Key 1', value: 'value1' },
 	{ label: 'Key 2', value: 'value2' },
+	{ label: 'Key 1', value: 'value1' },
 	{ isDisabled: true, label: 'Key 3', value: 'value3' },
+	{ label: 'Key 7', value: 'value7' },
 	{ label: 'Key 4', value: 'value4' },
-	{ label: 'Key 5', value: 'value5' },
+	{ label: 'Key 9', value: 'value9' },
 	{ label: 'Key 6', value: 'value6' },
-	{ label: 'Key 7', value: 'value7' },
 	{ label: 'Key 8', value: 'value8' },
-	{ label: 'Key 9', value: 'value9' },
+	{ label: 'Key 5', value: 'value5' },
 ]
 
 const toggleGroupOptions: Kotti.FieldToggleGroup.Props['options'] = [
@@ -753,6 +770,7 @@ export default defineComponent({
 				hideChangeButtons: boolean
 				isInline: boolean
 				isLoadingOptions: boolean
+				isUnsorted: boolean
 				maximumDate: Kotti.FieldDate.Value
 				maximumSelectable: Kotti.FieldNumber.Value
 				minimumDate: Kotti.FieldDate.Value
@@ -784,7 +802,7 @@ export default defineComponent({
 			placeholder2: Kotti.FieldText.Value
 			prefix: Kotti.FieldText.Value
 			rightIcon: Yoco.Icon | null
-			size: 'small' | 'medium' | 'large'
+			size: Kotti.Field.Size
 			suffix: Kotti.FieldText.Value
 			tabIndex: Kotti.FieldNumber.Value
 			validation: Kotti.Field.Validation.Result['type']
@@ -798,6 +816,7 @@ export default defineComponent({
 				hideChangeButtons: false,
 				isInline: false,
 				isLoadingOptions: false,
+				isUnsorted: false,
 				maximumDate: null,
 				maximumSelectable: null,
 				minimumDate: null,
@@ -829,7 +848,7 @@ export default defineComponent({
 			placeholder2: null,
 			prefix: null,
 			rightIcon: null,
-			size: 'medium',
+			size: Kotti.Field.Size.MEDIUM,
 			suffix: null,
 			tabIndex: null,
 			validation: 'empty',
@@ -979,13 +998,21 @@ export default defineComponent({
 					isLoadingOptions: settings.value.additionalProps.isLoadingOptions,
 				})
 
+			if (componentDefinition.value.additionalProps.includes('isUnsorted'))
+				Object.assign(additionalProps, {
+					isUnsorted: settings.value.additionalProps.isUnsorted,
+				})
+
 			if (componentDefinition.value.additionalProps.includes('maximumDate'))
 				Object.assign(additionalProps, {
 					maximumDate: settings.value.additionalProps.maximumDate,
 				})
 
 			if (
-				componentDefinition.value.additionalProps.includes('maximumSelectable')
+				componentDefinition.value.additionalProps.includes(
+					'maximumSelectable',
+				) &&
+				settings.value.additionalProps.maximumSelectable !== null
 			)
 				Object.assign(additionalProps, {
 					maximumSelectable: settings.value.additionalProps.maximumSelectable,
diff --git a/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue b/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue
index a91c310099..45d4986a13 100644
--- a/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue
+++ b/packages/kotti-ui/source/kotti-avatar/KtAvatar.vue
@@ -19,10 +19,10 @@ import { Yoco } from '@3yourmind/yoco'
 import { computed, defineComponent, Ref, ref } from '@vue/composition-api'
 import { roundArrow } from 'tippy.js'
 
+import { TIPPY_LIGHT_BORDER_ARROW_HEIGHT } from '../constants'
 import { makeProps } from '../make-props'
 
 import { KottiAvatar } from './types'
-const ARROW_HEIGHT = 7
 
 const useTooltip = (name: Ref<string | null>) => {
 	const tooltipTriggerRef = ref<Element | null>(null)
@@ -33,7 +33,7 @@ const useTooltip = (name: Ref<string | null>) => {
 			appendTo: () => document.body,
 			arrow: roundArrow,
 			content: name.value,
-			offset: [0, ARROW_HEIGHT],
+			offset: [0, TIPPY_LIGHT_BORDER_ARROW_HEIGHT],
 			theme: 'light-border',
 			...(name.value === null ? { trigger: 'manual' } : {}),
 		})),
diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue
index 6c116f77c5..7a8e1b1f5f 100644
--- a/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue
+++ b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelect.vue
@@ -19,13 +19,13 @@ import { makeProps } from '../make-props'
 import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldMultiSelect } from './types'
 
-export default defineComponent<KottiFieldMultiSelect.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldMultiSelect',
 	components: {
 		GenericSelectField,
 	},
 	props: makeProps(KottiFieldMultiSelect.propsSchema),
-	setup(props, { emit }) {
+	setup(props: KottiFieldMultiSelect.PropsInternal, { emit }) {
 		return {
 			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
 				emit(event, payload)
diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelectRemote.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelectRemote.vue
index d2444abb9d..19586d0c6d 100644
--- a/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelectRemote.vue
+++ b/packages/kotti-ui/source/kotti-field-select/KtFieldMultiSelectRemote.vue
@@ -20,13 +20,13 @@ import { makeProps } from '../make-props'
 import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldMultiSelectRemote } from './types'
 
-export default defineComponent<KottiFieldMultiSelectRemote.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldMultiSelectRemote',
 	components: {
 		GenericSelectField,
 	},
 	props: makeProps(KottiFieldMultiSelectRemote.propsSchema),
-	setup(props, { emit }) {
+	setup(props: KottiFieldMultiSelectRemote.PropsInternal, { emit }) {
 		return {
 			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
 				emit(event, payload)
diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue
index 3a1f47fa85..0502a68a3b 100644
--- a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue
+++ b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelect.vue
@@ -18,13 +18,13 @@ import { makeProps } from '../make-props'
 import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldSingleSelect } from './types'
 
-export default defineComponent<KottiFieldSingleSelect.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldSingleSelect',
 	components: {
 		GenericSelectField,
 	},
 	props: makeProps(KottiFieldSingleSelect.propsSchema),
-	setup(props, { emit }) {
+	setup(props: KottiFieldSingleSelect.PropsInternal, { emit }) {
 		return {
 			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
 				emit(event, payload)
diff --git a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
index 724c5c76aa..72b622a9d6 100644
--- a/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
+++ b/packages/kotti-ui/source/kotti-field-select/KtFieldSingleSelectRemote.vue
@@ -19,13 +19,13 @@ import { makeProps } from '../make-props'
 import GenericSelectField from './components/GenericSelectField.vue'
 import { KottiFieldSingleSelectRemote } from './types'
 
-export default defineComponent<KottiFieldSingleSelectRemote.PropsInternal>({
+export default defineComponent({
 	name: 'KtFieldSingleSelectRemote',
 	components: {
 		GenericSelectField,
 	},
 	props: makeProps(KottiFieldSingleSelectRemote.propsSchema),
-	setup(props, { emit }) {
+	setup(props: KottiFieldSingleSelectRemote.PropsInternal, { emit }) {
 		return {
 			onEmit: ({ event, payload }: { event: string; payload: unknown }) => {
 				emit(event, payload)
diff --git a/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue b/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
index 64fa3744ad..c0be40bf74 100644
--- a/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
+++ b/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
@@ -13,12 +13,7 @@
 import { Yoco } from '@3yourmind/yoco'
 import { defineComponent, ref, computed } from '@vue/composition-api'
 
-export default defineComponent<{
-	classes: string[]
-	handleClear(): void
-	isDropdownOpen: boolean
-	showClear: boolean
-}>({
+export default defineComponent({
 	name: 'ActionIcon',
 	props: {
 		classes: { required: true, type: Array },
@@ -26,7 +21,12 @@ export default defineComponent<{
 		isDropdownOpen: { required: true, type: Boolean },
 		showClear: { required: true, type: Boolean },
 	},
-	setup(props) {
+	setup(props: {
+		classes: string[]
+		handleClear(): void
+		isDropdownOpen: boolean
+		showClear: boolean
+	}) {
 		const hoverOnClearIcon = ref(false)
 
 		const canClear = computed<boolean>(
diff --git a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
index 6a4a937c65..5b0f19546f 100644
--- a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
+++ b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="kt-field-select">
+	<div :class="fieldSelectClasses">
 		<div ref="tippyTriggerRef">
 			<KtField
 				v-bind="{ field }"
@@ -28,7 +28,6 @@
 						/>
 					</div>
 					<input
-						v-if="isInputVisible"
 						ref="inputRef"
 						v-bind="inputProps"
 						@input="updateQuery"
@@ -53,12 +52,13 @@
 		<div ref="tippyContentRef">
 			<FieldSelectOptions
 				:actions="actions"
-				:dataTestPrefix="field.inputProps['data-test']"
+				:dataTestPrefix="inputProps['data-test']"
 				:isDisabled="field.isDisabled"
 				:isDropdownOpen="isDropdownOpen"
 				:isLoading="isLoadingOptions"
 				:isMultiple="isMultiple"
 				:isUnsorted="isUnsorted"
+				:maximumSelectable="maximumSelectable"
 				:options="filteredOptions"
 				:value="optionsValue"
 				@close="setIsDropdownOpen(false)"
@@ -119,9 +119,7 @@ type MultiValue =
 	| KottiFieldMultiSelect.Value
 	| KottiFieldMultiSelectRemote.Value
 
-export default defineComponent<
-	KottiFieldSingleSelectRemote.PropsInternal & z.output<typeof propsSchema>
->({
+export default defineComponent({
 	name: 'GenericSelectField',
 	components: {
 		ActionIcon,
@@ -129,7 +127,7 @@ export default defineComponent<
 		KtField,
 	},
 	props: makeProps(propsSchema),
-	setup(props, { emit: rawEmit }) {
+	setup(props: z.output<typeof propsSchema>, { emit: rawEmit }) {
 		const emit = (event: string, payload: unknown) =>
 			rawEmit('emit', { event, payload })
 
@@ -147,19 +145,11 @@ export default defineComponent<
 
 		const localQuery = ref<string | null>(null)
 
+		const { forceUpdateKey, forceUpdate } = useForceUpdate()
+
 		const { isDropdownOpen, isDropdownMounted, ...selectTippy } =
 			useSelectTippy()
 
-		const selectedLabel = computed((): string | null => {
-			if (field.currentValue === null) return null
-			return (
-				props.options.find((option) => option.value === field.currentValue)
-					?.label ?? null
-			)
-		})
-
-		const { forceUpdateKey, forceUpdate } = useForceUpdate()
-
 		watch(isDropdownMounted, (isMounted) => {
 			if (isMounted) return
 
@@ -182,22 +172,31 @@ export default defineComponent<
 		 * keeps reference of already seen option labels so that
 		 * the tags can be rendered properly when filtering remotely
 		 */
-		const seenValueLabelMap = ref<Map<Shared.Value, string>>(new Map())
+		const seenValueLabelMap = ref<Map<Shared.Value, Shared.Option['label']>>(
+			new Map(),
+		)
 
 		watch(
 			() => props.options,
 			() => {
 				seenValueLabelMap.value = new Map([
 					...seenValueLabelMap.value,
-					...props.options.map((option): [Shared.Value, string] => [
-						option.value,
-						option.label,
-					]),
+					...props.options.map(
+						(option): [Shared.Value, Shared.Option['label']] => [
+							option.value,
+							option.label,
+						],
+					),
 				])
 			},
 			{ immediate: true },
 		)
 
+		const isInputVisible = computed(
+			// save some space in multi select when tags are shown
+			() => !props.isMultiple || isDropdownOpen.value || field.isEmpty,
+		)
+
 		return {
 			collapsedTagCount: computed(() =>
 				props.isMultiple
@@ -205,6 +204,10 @@ export default defineComponent<
 					: 0,
 			),
 			field,
+			fieldSelectClasses: computed(() => ({
+				'kt-field-select': true,
+				'kt-field-select--is-input-visible': !isInputVisible.value,
+			})),
 			filteredOptions: computed(() =>
 				props.isRemote
 					? props.options
@@ -224,15 +227,16 @@ export default defineComponent<
 				value: (() => {
 					if (isDropdownOpen.value) return queryValue.value ?? undefined
 
-					return selectedLabel.value ?? undefined
+					// can't bind multiple values to input (therefore, we just bind `undefined`)
+					if (field.currentValue === null || props.isMultiple) return undefined
+
+					return props.options.find(
+						(option) => option.value === field.currentValue,
+					)?.label
 				})(),
 			})),
 			inputRef,
 			isDropdownOpen,
-			isInputVisible: computed(
-				// save some space in multi select when tags are shown
-				() => !props.isMultiple || isDropdownOpen.value || field.isEmpty,
-			),
 			tippyContentRef: selectTippy.tippyContentRef,
 			tippyTriggerRef: selectTippy.tippyTriggerRef,
 			onOptionsInput: (value: MultiValue) => {
@@ -269,11 +273,15 @@ export default defineComponent<
 			},
 			setIsDropdownOpen: selectTippy.setIsDropdownOpen,
 			updateQuery: ({ target: { value } }: { target: HTMLInputElement }) => {
-				const newValue = value === '' ? null : value
+				if (!isDropdownOpen.value) {
+					selectTippy.setIsDropdownOpen(true)
+				} else {
+					const newValue = value === '' ? null : value
 
-				if (props.isRemote && props.query !== newValue)
-					emit(UPDATE_QUERY, newValue)
-				else localQuery.value = newValue
+					if (props.isRemote && props.query !== newValue)
+						emit(UPDATE_QUERY, newValue)
+					else localQuery.value = newValue
+				}
 
 				forceUpdate()
 			},
@@ -302,6 +310,17 @@ export default defineComponent<
 		margin-bottom: 0.8rem;
 	}
 
+	// can't rely on v-if because the field wouldn't be focusable
+	&.kt-field-select--is-input-visible {
+		position: relative;
+
+		.kt-field-select__wrapper {
+			position: absolute;
+			left: -10000px;
+			pointer-events: none;
+		}
+	}
+
 	&__query {
 		display: flex;
 		flex: 1;
@@ -369,7 +388,7 @@ export default defineComponent<
 	&__wrapper {
 		display: flex;
 		flex: 1;
-		min-width: 30%; /* TODO: necessary? */
+		min-width: 30%;
 		padding: 0;
 		margin: 0;
 		line-height: 1.6;
diff --git a/packages/kotti-ui/source/kotti-field-select/components/Options.vue b/packages/kotti-ui/source/kotti-field-select/components/Options.vue
index a0609cd0cd..9a04293708 100644
--- a/packages/kotti-ui/source/kotti-field-select/components/Options.vue
+++ b/packages/kotti-ui/source/kotti-field-select/components/Options.vue
@@ -62,10 +62,11 @@ const propsSchema = z.object({
 	actions: z.array(Shared.actionSchema),
 	dataTestPrefix: z.string(),
 	isDisabled: z.boolean().default(false),
-	isDropdownOpen: z.boolean(),
+	isDropdownOpen: z.boolean().default(false),
 	isLoading: z.boolean().default(false),
 	isMultiple: z.boolean().default(false),
 	isUnsorted: z.boolean().default(false),
+	maximumSelectable: z.number().int().min(0),
 	options: z.array(Shared.optionSchema),
 	value: z.array(Shared.valueSchema),
 })
@@ -79,24 +80,35 @@ type ModifiedOption = z.output<
 const mod = (number: number, divisor: number) =>
 	((number % divisor) + divisor) % divisor
 
-export default defineComponent<z.output<typeof propsSchema>>({
+export default defineComponent({
 	name: 'FieldSelectOptions',
 	components: {
 		FieldSelectOptionsItem,
 	},
 	props: makeProps(propsSchema),
-	setup(props, { emit }) {
+	setup(props: z.output<typeof propsSchema>, { emit }) {
 		const translations = useTranslationNamespace('KtFieldSelects')
 
 		const optionsRef = ref<HTMLDivElement | null>(null)
 
 		const modifiedOptions = computed(() => {
-			const modifiedOptions: ModifiedOption[] = props.options.map((option) => ({
-				...option,
-				dataTest: option.dataTest ?? `${props.dataTestPrefix}.${option.value}`,
-				isDisabled: (props.isDisabled || option.isDisabled) ?? false,
-				isSelected: props.value.includes(option.value),
-			}))
+			const isLimitReached =
+				props.isMultiple && props.value.length >= props.maximumSelectable
+
+			const modifiedOptions: ModifiedOption[] = props.options.map((option) => {
+				const isSelected = props.value.includes(option.value)
+
+				return {
+					...option,
+					dataTest:
+						option.dataTest ?? `${props.dataTestPrefix}.${option.value}`,
+					isDisabled:
+						props.isDisabled ||
+						option.isDisabled ||
+						(isLimitReached && !isSelected),
+					isSelected,
+				}
+			})
 
 			if (props.isUnsorted) return modifiedOptions
 
@@ -104,11 +116,12 @@ export default defineComponent<z.output<typeof propsSchema>>({
 		})
 
 		const hoveredIndex = ref(-1)
+		const resetHoveredIndex = () => (hoveredIndex.value = -1)
 
 		watch(
 			() => props.isDropdownOpen,
 			(isOpen) => {
-				if (!isOpen) hoveredIndex.value = -1
+				if (!isOpen) resetHoveredIndex()
 			},
 		)
 
@@ -117,7 +130,7 @@ export default defineComponent<z.output<typeof propsSchema>>({
 		)
 
 		watch(itemCount, (newValue, oldValue) => {
-			if (newValue !== oldValue) hoveredIndex.value = -1
+			if (newValue !== oldValue) resetHoveredIndex()
 		})
 
 		const selectOption = (option: ModifiedOption) => {
@@ -156,14 +169,14 @@ export default defineComponent<z.output<typeof propsSchema>>({
 
 				case 'Enter': {
 					const index = hoveredIndex.value
-					const optionLength = modifiedOptions.value.length
+					const optionsLength = modifiedOptions.value.length
 
 					if (index < 0) return
 
-					if (index < optionLength)
+					if (index < optionsLength)
 						return selectOption(modifiedOptions.value[index])
 
-					return onAction(props.actions[index - optionLength])
+					return onAction(props.actions[index - optionsLength])
 				}
 			}
 		}
@@ -222,7 +235,7 @@ export default defineComponent<z.output<typeof propsSchema>>({
 	*/
 	margin-right: -9px;
 	margin-left: -9px;
-	overflow-y: auto;
+	overflow: auto;
 
 	&__loading {
 		position: absolute;
diff --git a/packages/kotti-ui/source/kotti-field-select/components/OptionsItem.vue b/packages/kotti-ui/source/kotti-field-select/components/OptionsItem.vue
index fe7ba8b597..4b7e8bc4a9 100644
--- a/packages/kotti-ui/source/kotti-field-select/components/OptionsItem.vue
+++ b/packages/kotti-ui/source/kotti-field-select/components/OptionsItem.vue
@@ -26,10 +26,10 @@ const propsSchema = z.object({
 	type: z.enum(['action', 'option']),
 })
 
-export default defineComponent<z.output<typeof propsSchema>>({
+export default defineComponent({
 	name: 'FieldSelectOptionsItem',
 	props: makeProps(propsSchema),
-	setup(props, { emit }) {
+	setup(props: z.output<typeof propsSchema>, { emit }) {
 		const optionRef = ref<HTMLDivElement | null>(null)
 
 		watch(
@@ -79,7 +79,6 @@ export default defineComponent<z.output<typeof propsSchema>>({
 
 	&--is-type-action {
 		color: var(--interactive-01);
-		cursor: pointer;
 
 		&:hover {
 			background-color: var(--ui-01);
diff --git a/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts b/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
index 583432f8f3..689271d642 100644
--- a/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
+++ b/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
@@ -3,10 +3,9 @@ import { computed, ref } from '@vue/composition-api'
 import castArray from 'lodash.castarray'
 import { roundArrow } from 'tippy.js'
 
+import { TIPPY_LIGHT_BORDER_ARROW_HEIGHT } from '../../constants'
 import { sameWidth } from '../utils/tippy-utils'
 
-const ARROW_HEIGHT = 7
-
 export const useSelectTippy = () => {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const tippyTriggerRef = ref<any | null>(null)
@@ -27,7 +26,7 @@ export const useSelectTippy = () => {
 			hideOnClick: false,
 			interactive: true,
 			maxWidth: 'none',
-			offset: [0, ARROW_HEIGHT],
+			offset: [0, TIPPY_LIGHT_BORDER_ARROW_HEIGHT],
 			onClickOutside: () => {
 				setIsDropdownOpen(false)
 			},
diff --git a/packages/kotti-ui/source/kotti-field-select/types.ts b/packages/kotti-ui/source/kotti-field-select/types.ts
index 2f2d8bd5ab..04d08f333a 100644
--- a/packages/kotti-ui/source/kotti-field-select/types.ts
+++ b/packages/kotti-ui/source/kotti-field-select/types.ts
@@ -32,8 +32,8 @@ export namespace Shared {
 		})
 
 	export const isMultipleSchema = z.object({
-		collapseTagsAfter: z.number().default(Number.MAX_SAFE_INTEGER),
-		maximumSelectable: z.number().default(Number.MAX_SAFE_INTEGER),
+		collapseTagsAfter: z.number().int().min(0).default(Number.MAX_SAFE_INTEGER),
+		maximumSelectable: z.number().int().min(0).default(Number.MAX_SAFE_INTEGER),
 		value: z.array(Shared.valueSchema).default(() => []),
 	})
 
diff --git a/packages/kotti-ui/source/kotti-field/mixins.scss b/packages/kotti-ui/source/kotti-field/mixins.scss
index ddc43771fd..3cce327fd0 100644
--- a/packages/kotti-ui/source/kotti-field/mixins.scss
+++ b/packages/kotti-ui/source/kotti-field/mixins.scss
@@ -406,6 +406,7 @@
 
 		&::-webkit-scrollbar {
 			width: 5px;
+			height: 5px;
 			opacity: 1;
 			transition: opacity var(--transition-medium) ease-out;
 		}
diff --git a/packages/kotti-ui/source/kotti-filters/KtFilters.vue b/packages/kotti-ui/source/kotti-filters/KtFilters.vue
index 09381dd08f..d8cc395a3d 100644
--- a/packages/kotti-ui/source/kotti-filters/KtFilters.vue
+++ b/packages/kotti-ui/source/kotti-filters/KtFilters.vue
@@ -50,6 +50,7 @@ import { Yoco } from '@3yourmind/yoco'
 import { computed, defineComponent, ref } from '@vue/composition-api'
 import { roundArrow } from 'tippy.js'
 
+import { TIPPY_LIGHT_BORDER_ARROW_HEIGHT } from '../constants'
 import { useTranslationNamespace } from '../kotti-i18n/hooks'
 
 import ButtonLink from './components/ButtonLink.vue'
@@ -59,8 +60,6 @@ import FilterSearch from './components/FilterSearch.vue'
 import { KottiFilters } from './types'
 import { isValidColumn } from './validators'
 
-const ARROW_HEIGHT = 7
-
 export default defineComponent<KottiFilters.PropsInternal>({
 	name: 'KtFilters',
 	components: {
@@ -177,7 +176,7 @@ export default defineComponent<KottiFilters.PropsInternal>({
 				hideOnClick: false,
 				interactive: true,
 				maxWidth: 'none',
-				offset: [0, ARROW_HEIGHT],
+				offset: [0, TIPPY_LIGHT_BORDER_ARROW_HEIGHT],
 				onCreate(instance) {
 					tippyInstanceRef.value = instance
 				},