From 6abb37ebee029c10c5e36c2e325f52dc1af304a4 Mon Sep 17 00:00:00 2001
From: Tomas Langer <tomaslanger@hotmail.cz>
Date: Thu, 23 May 2024 17:46:16 +0200
Subject: [PATCH 1/2] feat(playground): add SelectEnumField

---
 .../admin/app/components/navigation.tsx       |  9 ++--
 .../playground/admin/app/pages/select.tsx     | 19 ++++++-
 .../admin/lib/components/form/select.tsx      | 54 +++++++++++++++++--
 3 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/packages/playground/admin/app/components/navigation.tsx b/packages/playground/admin/app/components/navigation.tsx
index 279fb84bd..88de28ffd 100644
--- a/packages/playground/admin/app/components/navigation.tsx
+++ b/packages/playground/admin/app/components/navigation.tsx
@@ -17,10 +17,10 @@ export const Navigation = () => {
 					<MenuItem icon={line} label={'Static columns'} to={'board/status'} />
 				</MenuItem>
 				<MenuItem icon={<GripVertical size={16} />} label={'Repeater'}>
-						<MenuItem icon={line} label={'Sortable repeater'} to={'repeater'} />
-						<MenuItem icon={line} label={'Non-sortable repeater'} to={'repeater/nonSortable'} />
-						<MenuItem icon={line} label={'Block repeater'} to={'blocks'} />
-						<MenuItem icon={line} label={'Block repeater w/o dual render'} to={'blocks/withoutDualRender'} />
+					<MenuItem icon={line} label={'Sortable repeater'} to={'repeater'} />
+					<MenuItem icon={line} label={'Non-sortable repeater'} to={'repeater/nonSortable'} />
+					<MenuItem icon={line} label={'Block repeater'} to={'blocks'} />
+					<MenuItem icon={line} label={'Block repeater w/o dual render'} to={'blocks/withoutDualRender'} />
 				</MenuItem>
 				<MenuItem icon={<TableIcon size={16} />} label={'Grid'}>
 					<MenuItem icon={line} label={'Complex grid'} to={'grid'} />
@@ -39,6 +39,7 @@ export const Navigation = () => {
 					<MenuItem icon={line} label={'Create new form'} to={'select/createNewForm'} />
 					<MenuItem icon={line} label={'Has many select'} to={'select/hasMany'} />
 					<MenuItem icon={line} label={'Has many sortable select'} to={'select/hasManySortable'} />
+					<MenuItem icon={line} label={'Enum select'} to={'select/enumSelect'} />
 				</MenuItem>
 				<MenuItem icon={<UploadIcon size={16} />} label={'Upload'}>
 					<MenuItem icon={line} label={'Image upload'} to={'upload/image'} />
diff --git a/packages/playground/admin/app/pages/select.tsx b/packages/playground/admin/app/pages/select.tsx
index b7557bc08..14ed77b7f 100644
--- a/packages/playground/admin/app/pages/select.tsx
+++ b/packages/playground/admin/app/pages/select.tsx
@@ -3,7 +3,7 @@ import { Binding, PersistButton } from '../../lib/components/binding'
 import { EntitySubTree } from '@contember/interface'
 import * as React from 'react'
 import { Field } from '@contember/react-binding'
-import { InputField, MultiSelectField, SelectField, SortableMultiSelectField } from '../../lib/components/form'
+import { InputField, MultiSelectField, SelectEnumField, SelectField, SortableMultiSelectField } from '../../lib/components/form'
 
 
 export const hasOne = () => <>
@@ -70,3 +70,20 @@ export const createNewForm = () => <>
 		</EntitySubTree>
 	</Binding>
 </>
+
+export const enumSelect = () => <>
+	<Binding>
+		<Slots.Actions>
+			<PersistButton />
+		</Slots.Actions>
+		<EntitySubTree entity={'InputRoot(unique=unique)'} setOnCreate={'(unique=unique)'}>
+			<div className={'space-y-4'}>
+				<SelectEnumField field={'enumValue'} label={'Some enum'} options={{
+					a: 'Option A',
+					b: 'Option B',
+					c: 'Option C',
+				}} />
+			</div>
+		</EntitySubTree>
+	</Binding>
+</>
diff --git a/packages/playground/admin/lib/components/form/select.tsx b/packages/playground/admin/lib/components/form/select.tsx
index a81292962..a244c1955 100644
--- a/packages/playground/admin/lib/components/form/select.tsx
+++ b/packages/playground/admin/lib/components/form/select.tsx
@@ -1,8 +1,10 @@
-import { MultiSelectInput, MultiSelectInputProps, SelectInput, SelectInputProps, SortableMultiSelectInput, SortableMultiSelectInputProps } from '../select'
+import { MultiSelectInput, MultiSelectInputProps, SelectDefaultPlaceholderUI, SelectInput, SelectInputActionsUI, SelectInputProps, SelectInputUI, SelectListItemUI, SelectPopoverContent, SortableMultiSelectInput, SortableMultiSelectInputProps } from '../select'
 import * as React from 'react'
 import { FormContainer, FormContainerProps } from './container'
-import { FormHasManyRelationScope, FormHasOneRelationScope } from '@contember/react-form'
-import { Component } from '@contember/interface'
+import { FormFieldScope, FormHasManyRelationScope, FormHasOneRelationScope } from '@contember/react-form'
+import { Component, Field, SugaredRelativeSingleField, useField } from '@contember/interface'
+import { Popover, PopoverTrigger } from '../ui/popover'
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
 
 
 export type SelectFieldProps =
@@ -52,3 +54,49 @@ export const SortableMultiSelectField = Component<SortableMultiSelectFieldProps>
 		</FormHasManyRelationScope>
 	)
 })
+
+export type SelectEnumFieldProps =
+	& Omit<FormContainerProps, 'children'>
+	& {
+		field: SugaredRelativeSingleField['field']
+		options: Record<string, React.ReactNode>
+		placeholder?: React.ReactNode
+		defaultValue?: string
+	}
+
+export const SelectEnumField = Component<SelectEnumFieldProps>(
+	({ field, label, description, options, placeholder }) => {
+		const [open, setOpen] = React.useState(false)
+		const fieldAccessor = useField<string>(field)
+
+		return (
+			<FormFieldScope field={field}>
+				<FormContainer description={description} label={label}>
+					<Popover open={open} onOpenChange={setOpen}>
+						<PopoverTrigger asChild>
+							<SelectInputUI>
+								{fieldAccessor.value ? options[fieldAccessor.value] : placeholder ?? <SelectDefaultPlaceholderUI />}
+								<SelectInputActionsUI>
+									{open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+								</SelectInputActionsUI>
+							</SelectInputUI>
+						</PopoverTrigger>
+						<SelectPopoverContent>
+							{Object.entries(options).map(([value, label]) => (
+								<SelectListItemUI key={value} onClick={() => {
+									fieldAccessor.updateValue(value)
+									setOpen(false)
+								}}>
+									{label}
+								</SelectListItemUI>
+							))}
+						</SelectPopoverContent>
+					</Popover>
+
+				</FormContainer>
+			</FormFieldScope>
+		)
+	},
+	({ field, defaultValue }) => <Field field={field} defaultValue={defaultValue} />,
+	'SelectEnumField',
+)

From 3dabe9171423017f5bb325cea77cc09f5c85290f Mon Sep 17 00:00:00 2001
From: David Matejka <matej21@matej21.cz>
Date: Fri, 24 May 2024 13:37:03 +0200
Subject: [PATCH 2/2] feat(playground): improve tab navigation in selects

---
 .../admin/lib/components/form/inputs.tsx      |   2 +-
 .../admin/lib/components/form/select.tsx      |  73 +++++++-----
 .../lib/components/select/multi-select.tsx    |  64 +++++++----
 .../admin/lib/components/select/select.tsx    |  46 ++++----
 .../lib/components/select/sortable-select.tsx | 104 +++++++++---------
 .../admin/lib/components/select/ui.tsx        |  51 +++++++--
 6 files changed, 209 insertions(+), 131 deletions(-)

diff --git a/packages/playground/admin/lib/components/form/inputs.tsx b/packages/playground/admin/lib/components/form/inputs.tsx
index 4472f11ac..3b38e45b5 100644
--- a/packages/playground/admin/lib/components/form/inputs.tsx
+++ b/packages/playground/admin/lib/components/form/inputs.tsx
@@ -6,7 +6,7 @@ import { TextareaAutosize } from '../ui/textarea'
 import { FormLabelUI } from './ui'
 import { FormCheckbox, FormCheckboxProps, FormFieldScope, FormInput, FormInputProps, FormLabel, FormRadioInput, FormRadioItemProps } from '@contember/react-form'
 import { FormContainer, FormContainerProps } from './container'
-import { Component, Field, SugaredRelativeSingleField } from '@contember/interface'
+import { Component } from '@contember/interface'
 
 
 export type InputFieldProps =
diff --git a/packages/playground/admin/lib/components/form/select.tsx b/packages/playground/admin/lib/components/form/select.tsx
index a244c1955..b1625ff49 100644
--- a/packages/playground/admin/lib/components/form/select.tsx
+++ b/packages/playground/admin/lib/components/form/select.tsx
@@ -1,7 +1,20 @@
-import { MultiSelectInput, MultiSelectInputProps, SelectDefaultPlaceholderUI, SelectInput, SelectInputActionsUI, SelectInputProps, SelectInputUI, SelectListItemUI, SelectPopoverContent, SortableMultiSelectInput, SortableMultiSelectInputProps } from '../select'
+import {
+	MultiSelectInput,
+	MultiSelectInputProps,
+	SelectDefaultPlaceholderUI,
+	SelectInput,
+	SelectInputActionsUI,
+	SelectInputProps,
+	SelectInputUI,
+	SelectInputWrapperUI,
+	SelectListItemUI,
+	SelectPopoverContent,
+	SortableMultiSelectInput,
+	SortableMultiSelectInputProps,
+} from '../select'
 import * as React from 'react'
 import { FormContainer, FormContainerProps } from './container'
-import { FormFieldScope, FormHasManyRelationScope, FormHasOneRelationScope } from '@contember/react-form'
+import { FormFieldScope, FormHasManyRelationScope, FormHasOneRelationScope, useFormFieldId } from '@contember/react-form'
 import { Component, Field, SugaredRelativeSingleField, useField } from '@contember/interface'
 import { Popover, PopoverTrigger } from '../ui/popover'
 import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
@@ -66,33 +79,10 @@ export type SelectEnumFieldProps =
 
 export const SelectEnumField = Component<SelectEnumFieldProps>(
 	({ field, label, description, options, placeholder }) => {
-		const [open, setOpen] = React.useState(false)
-		const fieldAccessor = useField<string>(field)
-
 		return (
 			<FormFieldScope field={field}>
 				<FormContainer description={description} label={label}>
-					<Popover open={open} onOpenChange={setOpen}>
-						<PopoverTrigger asChild>
-							<SelectInputUI>
-								{fieldAccessor.value ? options[fieldAccessor.value] : placeholder ?? <SelectDefaultPlaceholderUI />}
-								<SelectInputActionsUI>
-									{open ? <ChevronUpIcon /> : <ChevronDownIcon />}
-								</SelectInputActionsUI>
-							</SelectInputUI>
-						</PopoverTrigger>
-						<SelectPopoverContent>
-							{Object.entries(options).map(([value, label]) => (
-								<SelectListItemUI key={value} onClick={() => {
-									fieldAccessor.updateValue(value)
-									setOpen(false)
-								}}>
-									{label}
-								</SelectListItemUI>
-							))}
-						</SelectPopoverContent>
-					</Popover>
-
+					<SelectEnumFieldInner field={field} options={options} placeholder={placeholder} />
 				</FormContainer>
 			</FormFieldScope>
 		)
@@ -100,3 +90,34 @@ export const SelectEnumField = Component<SelectEnumFieldProps>(
 	({ field, defaultValue }) => <Field field={field} defaultValue={defaultValue} />,
 	'SelectEnumField',
 )
+
+const SelectEnumFieldInner = ({ field, options, placeholder }: SelectEnumFieldProps) => {
+	const [open, setOpen] = React.useState(false)
+	const fieldAccessor = useField<string>(field)
+	const id = useFormFieldId()
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<SelectInputWrapperUI>
+				<PopoverTrigger asChild>
+					<SelectInputUI id={id ? `${id}-input` : undefined}>
+						{fieldAccessor.value ? options[fieldAccessor.value] : placeholder ?? <SelectDefaultPlaceholderUI />}
+						<SelectInputActionsUI>
+							{open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+						</SelectInputActionsUI>
+					</SelectInputUI>
+				</PopoverTrigger>
+			</SelectInputWrapperUI>
+			<SelectPopoverContent>
+				{Object.entries(options).map(([value, label]) => (
+					<SelectListItemUI key={value} onClick={() => {
+						fieldAccessor.updateValue(value)
+						setOpen(false)
+					}}>
+						{label}
+					</SelectListItemUI>
+				))}
+			</SelectPopoverContent>
+		</Popover>
+
+	)
+}
diff --git a/packages/playground/admin/lib/components/select/multi-select.tsx b/packages/playground/admin/lib/components/select/multi-select.tsx
index aaf340a90..fa11e0b57 100644
--- a/packages/playground/admin/lib/components/select/multi-select.tsx
+++ b/packages/playground/admin/lib/components/select/multi-select.tsx
@@ -1,6 +1,17 @@
 import * as React from 'react'
 import { ReactNode } from 'react'
-import { MultiSelectItemContentUI, MultiSelectItemRemoveButtonUI, MultiSelectItemUI, SelectCreateNewTrigger, SelectDefaultPlaceholderUI, SelectInputActionsUI, SelectInputUI, SelectListItemUI, SelectPopoverContent } from './ui'
+import {
+	MultiSelectItemContentUI,
+	MultiSelectItemRemoveButtonUI,
+	MultiSelectItemUI,
+	SelectCreateNewTrigger,
+	SelectDefaultPlaceholderUI,
+	SelectInputActionsUI,
+	SelectInputUI,
+	SelectInputWrapperUI,
+	SelectListItemUI,
+	SelectPopoverContent,
+} from './ui'
 import { ChevronDownIcon } from 'lucide-react'
 import { Popover, PopoverTrigger } from '../ui/popover'
 import { Component, SugaredQualifiedEntityList, SugaredRelativeEntityList } from '@contember/interface'
@@ -9,6 +20,7 @@ import { SelectListInner } from './list'
 import { MultiSelect, SelectDataView, SelectEachValue, SelectItemTrigger, SelectOption, SelectPlaceholder } from '@contember/react-select'
 import { CreateEntityDialog } from './create-new'
 import { DataViewUnionFilterFields } from '@contember/react-dataview'
+import { useFormFieldId } from '@contember/react-form'
 
 export type MultiSelectInputProps =
 	& {
@@ -21,32 +33,36 @@ export type MultiSelectInputProps =
 }
 
 export const MultiSelectInput = Component<MultiSelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm }) => {
+	const id = useFormFieldId()
 	return (
 		<MultiSelect field={field} options={options}>
 			<div className="flex gap-1 items-center">
 				<Popover>
-					<PopoverTrigger asChild>
-						<SelectInputUI>
-							<SelectPlaceholder>
-								{placeholder ?? <SelectDefaultPlaceholderUI />}
-							</SelectPlaceholder>
+					<SelectInputWrapperUI>
+						<PopoverTrigger asChild>
+							<SelectInputUI id={id ? `${id}-input` : undefined}>
+								<SelectPlaceholder>
+									{placeholder ?? <SelectDefaultPlaceholderUI />}
+								</SelectPlaceholder>
 
-							<SelectEachValue>
-								<MultiSelectItemUI>
-									<MultiSelectItemContentUI>
-										{children}
-									</MultiSelectItemContentUI>
-									<SelectItemTrigger>
-										<MultiSelectItemRemoveButtonUI onClick={e => e.stopPropagation()} />
-									</SelectItemTrigger>
-								</MultiSelectItemUI>
-							</SelectEachValue>
+								<SelectEachValue>
+									<MultiSelectItemUI>
+										<MultiSelectItemContentUI>
+											{children}
+										</MultiSelectItemContentUI>
+										<SelectItemTrigger>
+											<MultiSelectItemRemoveButtonUI onClick={e => e.stopPropagation()} />
+										</SelectItemTrigger>
+									</MultiSelectItemUI>
+								</SelectEachValue>
+
+								<SelectInputActionsUI>
+									<ChevronDownIcon className={'w-4 h-4'} />
+								</SelectInputActionsUI>
+							</SelectInputUI>
+						</PopoverTrigger>
 
-							<SelectInputActionsUI>
-								<ChevronDownIcon className={'w-4 h-4'} />
-							</SelectInputActionsUI>
-						</SelectInputUI>
-					</PopoverTrigger>
+					</SelectInputWrapperUI>
 					<SelectPopoverContent>
 						<SelectDataView queryField={queryField}>
 							<SelectListInner filterToolbar={<SelectDefaultFilter />}>
@@ -69,4 +85,10 @@ export const MultiSelectInput = Component<MultiSelectInputProps>(({ field, query
 			</div>
 		</MultiSelect>
 	)
+}, ({ field, options, children }) => {
+	return (
+		<MultiSelect field={field} options={options}>
+			{children}
+		</MultiSelect>
+	)
 })
diff --git a/packages/playground/admin/lib/components/select/select.tsx b/packages/playground/admin/lib/components/select/select.tsx
index 25ab09de3..2e7a32873 100644
--- a/packages/playground/admin/lib/components/select/select.tsx
+++ b/packages/playground/admin/lib/components/select/select.tsx
@@ -5,12 +5,13 @@ import { Component, SugaredQualifiedEntityList } from '@contember/interface'
 import { Button } from '../ui/button'
 import { SugaredRelativeSingleEntity } from '@contember/react-binding'
 import { ChevronDownIcon, XIcon } from 'lucide-react'
-import { SelectCreateNewTrigger, SelectDefaultPlaceholderUI, SelectInputActionsUI, SelectInputUI, SelectListItemUI, SelectPopoverContent } from './ui'
+import { SelectCreateNewTrigger, SelectDefaultPlaceholderUI, SelectInputActionsUI, SelectInputUI, SelectInputWrapperUI, SelectListItemUI, SelectPopoverContent } from './ui'
 import { SelectListInner } from './list'
 import { Select, SelectDataView, SelectEachValue, SelectItemTrigger, SelectOption, SelectPlaceholder } from '@contember/react-select'
 import { CreateEntityDialog } from './create-new'
 import { SelectDefaultFilter } from './filter'
 import { DataViewUnionFilterFields } from '@contember/react-dataview'
+import { useFormFieldId } from '@contember/react-form'
 
 export type SelectInputProps =
 	& {
@@ -25,36 +26,37 @@ export type SelectInputProps =
 
 export const SelectInput = Component<SelectInputProps>(({ field, queryField, options, children, placeholder, createNewForm }) => {
 	const [open, setOpen] = React.useState(false)
+	const id = useFormFieldId()
 
 	return (
 		<Select field={field} onSelect={() => setOpen(false)} options={options}>
 			<div className="flex gap-1 items-center">
 				<Popover open={open} onOpenChange={setOpen}>
-					<PopoverTrigger asChild>
-
-						<SelectInputUI>
-							<SelectPlaceholder>
-								{placeholder ?? <SelectDefaultPlaceholderUI />}
-							</SelectPlaceholder>
-							<SelectEachValue>
-								{children}
-							</SelectEachValue>
-							<SelectInputActionsUI>
+					<SelectInputWrapperUI>
+						<PopoverTrigger asChild>
+							<SelectInputUI id={id ? `${id}-input` : undefined}>
+								<SelectPlaceholder>
+									{placeholder ?? <SelectDefaultPlaceholderUI />}
+								</SelectPlaceholder>
 								<SelectEachValue>
-									<SelectItemTrigger>
-										<Button size={'xs'} variant={'ghost'}>
-											<XIcon className={'w-4 h-4'} />
-										</Button>
-									</SelectItemTrigger>
+									{children}
 								</SelectEachValue>
-								<ChevronDownIcon className={'w-4 h-4'} />
-							</SelectInputActionsUI>
-						</SelectInputUI>
-
-					</PopoverTrigger>
+							</SelectInputUI>
+						</PopoverTrigger>
+						<SelectInputActionsUI>
+							<SelectEachValue>
+								<SelectItemTrigger>
+									<Button size={'xs'} variant={'ghost'}>
+										<XIcon className={'w-4 h-4'} />
+									</Button>
+								</SelectItemTrigger>
+							</SelectEachValue>
+							<ChevronDownIcon className={'w-4 h-4'} />
+						</SelectInputActionsUI>
+					</SelectInputWrapperUI>
 					<SelectPopoverContent>
 						<SelectDataView queryField={queryField}>
-							<SelectListInner filterToolbar={<SelectDefaultFilter/>}>
+							<SelectListInner filterToolbar={<SelectDefaultFilter />}>
 								<SelectOption>
 									<SelectItemTrigger>
 										<SelectListItemUI>
diff --git a/packages/playground/admin/lib/components/select/sortable-select.tsx b/packages/playground/admin/lib/components/select/sortable-select.tsx
index a83cec4c7..16273d636 100644
--- a/packages/playground/admin/lib/components/select/sortable-select.tsx
+++ b/packages/playground/admin/lib/components/select/sortable-select.tsx
@@ -10,7 +10,7 @@ import {
 	SelectCreateNewTrigger,
 	SelectDefaultPlaceholderUI,
 	SelectInputActionsUI,
-	SelectInputUI,
+	SelectInputUI, SelectInputWrapperUI,
 	SelectListItemUI,
 	SelectPopoverContent,
 } from './ui'
@@ -23,6 +23,7 @@ import { SelectDataView, SelectItemTrigger, SelectOption, SelectPlaceholder, Sor
 import { CreateEntityDialog } from './create-new'
 import { DataViewUnionFilterFields } from '@contember/react-dataview'
 import { SelectDefaultFilter } from './filter'
+import { useFormFieldId } from '@contember/react-form'
 
 const MultiSortableSelectDropIndicator = ({ position }: { position: 'before' | 'after' }) => (
 	<div className={cn('relative', position === 'before' ? '-translate-x-0.5' : 'translate-x-1.5')}>
@@ -34,64 +35,67 @@ const MultiSortableSelectDropIndicator = ({ position }: { position: 'before' | '
 
 export type SortableMultiSelectInputProps =
 	& {
-		field: SugaredRelativeEntityList['field']
-		sortableBy: SugaredRelativeSingleField['field']
-		connectAt: SugaredRelativeSingleEntity['field']
-		children: ReactNode
-		options?: SugaredQualifiedEntityList['entities']
-		placeholder?: ReactNode
-		createNewForm?: ReactNode
-		queryField?: DataViewUnionFilterFields
-	}
+	field: SugaredRelativeEntityList['field']
+	sortableBy: SugaredRelativeSingleField['field']
+	connectAt: SugaredRelativeSingleEntity['field']
+	children: ReactNode
+	options?: SugaredQualifiedEntityList['entities']
+	placeholder?: ReactNode
+	createNewForm?: ReactNode
+	queryField?: DataViewUnionFilterFields
+}
 
 export const SortableMultiSelectInput = Component<SortableMultiSelectInputProps>(({ field, queryField, options, children, sortableBy, connectAt, placeholder, createNewForm }) => {
+	const id = useFormFieldId()
 	return (
 		<SortableMultiSelect field={field} sortableBy={sortableBy} connectAt={connectAt} options={options}>
 			<div className="flex gap-1 items-center">
 				<Popover>
-					<PopoverTrigger asChild>
-						<SelectInputUI>
-							<SelectPlaceholder>
-								{placeholder ?? <SelectDefaultPlaceholderUI />}
-							</SelectPlaceholder>
+					<SelectInputWrapperUI>
+						<PopoverTrigger asChild>
+							<SelectInputUI id={id ? `${id}-input` : undefined}>
+								<SelectPlaceholder>
+									{placeholder ?? <SelectDefaultPlaceholderUI />}
+								</SelectPlaceholder>
 
-							<RepeaterSortable>
-								<RepeaterSortableEachItem>
-									<div className={'flex'}>
-										<MultiSortableSelectDropIndicator position={'before'} />
-										<RepeaterSortableItemNode>
-											<MultiSelectItemUI>
-												<HasOne field={connectAt}>
-													<RepeaterSortableItemActivator>
-														<MultiSelectSortableItemContentUI>
-															{children}
-														</MultiSelectSortableItemContentUI>
-													</RepeaterSortableItemActivator>
+								<RepeaterSortable>
+									<RepeaterSortableEachItem>
+										<div className={'flex'}>
+											<MultiSortableSelectDropIndicator position={'before'} />
+											<RepeaterSortableItemNode>
+												<MultiSelectItemUI>
+													<HasOne field={connectAt}>
+														<RepeaterSortableItemActivator>
+															<MultiSelectSortableItemContentUI>
+																{children}
+															</MultiSelectSortableItemContentUI>
+														</RepeaterSortableItemActivator>
 
-													<SelectItemTrigger>
-														<MultiSelectItemRemoveButtonUI onClick={e => e.stopPropagation()} />
-													</SelectItemTrigger>
-												</HasOne>
-											</MultiSelectItemUI>
-										</RepeaterSortableItemNode>
-										<MultiSortableSelectDropIndicator position={'after'} />
-									</div>
-								</RepeaterSortableEachItem>
+														<SelectItemTrigger>
+															<MultiSelectItemRemoveButtonUI onClick={e => e.stopPropagation()} />
+														</SelectItemTrigger>
+													</HasOne>
+												</MultiSelectItemUI>
+											</RepeaterSortableItemNode>
+											<MultiSortableSelectDropIndicator position={'after'} />
+										</div>
+									</RepeaterSortableEachItem>
 
-								<RepeaterSortableDragOverlay>
-									<MultiSelectItemDragOverlayUI>
-										<HasOne field={connectAt}>
-											{children}
-										</HasOne>
-									</MultiSelectItemDragOverlayUI>
-								</RepeaterSortableDragOverlay>
-							</RepeaterSortable>
+									<RepeaterSortableDragOverlay>
+										<MultiSelectItemDragOverlayUI>
+											<HasOne field={connectAt}>
+												{children}
+											</HasOne>
+										</MultiSelectItemDragOverlayUI>
+									</RepeaterSortableDragOverlay>
+								</RepeaterSortable>
 
-							<SelectInputActionsUI>
-								<ChevronDownIcon className={'w-4 h-4'} />
-							</SelectInputActionsUI>
-						</SelectInputUI>
-					</PopoverTrigger>
+								<SelectInputActionsUI>
+									<ChevronDownIcon className={'w-4 h-4'} />
+								</SelectInputActionsUI>
+							</SelectInputUI>
+						</PopoverTrigger>
+					</SelectInputWrapperUI>
 
 					<SelectPopoverContent>
 						<SelectDataView queryField={queryField}>
@@ -114,7 +118,7 @@ export const SortableMultiSelectInput = Component<SortableMultiSelectInputProps>
 				)}
 			</div>
 		</SortableMultiSelect>
-)
+	)
 }, ({ children, field, sortableBy, connectAt, options }) => {
 	return (
 		<SortableMultiSelect field={field} sortableBy={sortableBy} connectAt={connectAt} options={options}>
diff --git a/packages/playground/admin/lib/components/select/ui.tsx b/packages/playground/admin/lib/components/select/ui.tsx
index 2034bb49a..421987ed0 100644
--- a/packages/playground/admin/lib/components/select/ui.tsx
+++ b/packages/playground/admin/lib/components/select/ui.tsx
@@ -1,16 +1,35 @@
 import { uic } from '../../../lib/utils/uic'
-import { InputLike } from '../ui/input'
 import { Button } from '../ui/button'
 import * as React from 'react'
+import { forwardRef } from 'react'
 import { CheckIcon, PlusIcon, XIcon } from 'lucide-react'
 import { PopoverContent } from '../ui/popover'
 import { dict } from '../../../lib/dict'
-import { forwardRef } from 'react'
 
-export const SelectInputUI = uic(InputLike, {
-	baseClass: 'cursor-pointer hover:border-gray-400 relative flex gap-2 flex-wrap py-1 pr-6',
+
+export const SelectInputWrapperUI = uic('div', {
+	baseClass: `
+		w-full max-w-md
+		relative
+		`,
 })
-export const SelectInputActionsUI = uic('div', {
+
+export const SelectInputUI = uic('button', {
+	baseClass: `
+		flex gap-2 flex-wrap items-center
+		w-full min-h-10
+		p-2 py-1 pr-6
+		bg-background
+		rounded-md border border-input ring-offset-background
+		text-sm
+		cursor-pointer
+		hover:border-gray-400
+		placeholder:text-muted-foreground
+		focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+		disabled:cursor-not-allowed disabled:opacity-50
+		`,
+})
+export const SelectInputActionsUI = uic('span', {
 	baseClass: 'absolute right-2 top-1/2 -translate-y-1/2 flex gap-1 items-center',
 })
 
@@ -25,22 +44,32 @@ export const SelectListItemUI = uic(Button, {
 
 export const SelectDefaultPlaceholderUI = () => <span className={'text-gray-400'}>{dict.select.placeholder}</span>
 
-export const MultiSelectItemUI = uic('div', {
+export const MultiSelectItemUI = uic('span', {
 	baseClass: 'flex items-stretch border rounded hover:shadow transition-all',
 })
-export const MultiSelectItemContentUI = uic('div', {
+export const MultiSelectItemContentUI = uic('span', {
 	baseClass: 'rounded-l px-2 py-1 bg-white  ',
 })
-export const MultiSelectSortableItemContentUI = uic('div', {
+export const MultiSelectSortableItemContentUI = uic('span', {
 	baseClass: 'rounded-l px-2 py-1 bg-white hover:bg-gray-50 cursor-move transition-all',
 })
-export const MultiSelectItemDragOverlayUI = uic('div', {
+export const MultiSelectItemDragOverlayUI = uic('span', {
 	baseClass: 'rounded px-2 py-1 bg-gray-100 inline-flex gap-2 items-center bg-opacity-20 backdrop-blur text-sm border shadow',
 })
 
-export const MultiSelectItemRemoveButtonUI = uic('button', {
-	baseClass: 'bg-gray-100 border-l py-1 px-2 rounded-r text-black flex-inline hover:bg-gray-300',
+export const MultiSelectItemRemoveButtonUI = uic('span', {
+	baseClass: 'bg-gray-100 border-l py-1 px-2 rounded-r text-black inline-flex items-center justify-center hover:bg-gray-300',
 	afterChildren: <XIcon className={'w-3 h-3'}/>,
+	defaultProps: {
+		tabIndex: 0,
+		role: 'button',
+		onKeyDown: e => {
+			if (e.key === 'Enter' || e.key === ' ') {
+				e.currentTarget.click()
+				e.preventDefault()
+			}
+		},
+	},
 })
 
 export const SelectPopoverContent = uic(PopoverContent, {