mirror of
https://github.com/block/goose.git
synced 2026-07-17 12:56:20 +02:00
fix not being able to select a model in dialog
This commit is contained in:
@@ -6,23 +6,36 @@ export const Select = (props: React.ComponentProps<typeof ReactSelect>) => {
|
||||
<ReactSelect
|
||||
{...props}
|
||||
unstyled
|
||||
isSearchable={props.isSearchable !== false}
|
||||
closeMenuOnSelect={props.closeMenuOnSelect !== false}
|
||||
blurInputOnSelect={props.blurInputOnSelect !== false}
|
||||
classNames={{
|
||||
container: () => 'w-full cursor-pointer relative z-[99999]',
|
||||
indicatorSeparator: () => 'h-0',
|
||||
control: ({ isFocused }) =>
|
||||
`border ${isFocused ? 'border-borderStandard' : 'border-borderSubtle'} focus:border-borderStandard hover:border-borderStandard rounded-md w-full px-4 py-2 text-sm text-textSubtle hover:cursor-pointer`,
|
||||
menu: () =>
|
||||
'mt-1 bg-background-default border border-borderStandard rounded-md text-textSubtle overflow-hidden relative z-[99999] select__menu',
|
||||
menuPortal: () => 'z-[99999] select__menu',
|
||||
option: () => 'py-2 px-4 hover:cursor-pointer hover:bg-bgSubtle text-textStandard text-sm',
|
||||
}}
|
||||
menuPortalTarget={document.body}
|
||||
styles={{
|
||||
menuPortal: (base) => ({
|
||||
...base,
|
||||
zIndex: 99999,
|
||||
}),
|
||||
'mt-1 bg-background-default border border-borderStandard rounded-md text-textSubtle overflow-hidden absolute z-[99999] select__menu',
|
||||
option: ({ isFocused, isSelected, isDisabled }) => {
|
||||
let classes = 'py-2 px-4 text-sm cursor-pointer';
|
||||
|
||||
if (isDisabled) {
|
||||
classes += ' opacity-50 cursor-not-allowed';
|
||||
} else if (isSelected) {
|
||||
classes += ' bg-background-accent text-text-on-accent';
|
||||
} else if (isFocused) {
|
||||
classes += ' bg-background-muted text-textStandard';
|
||||
} else {
|
||||
classes += ' text-textStandard hover:bg-background-muted';
|
||||
}
|
||||
|
||||
return classes;
|
||||
},
|
||||
}}
|
||||
menuShouldBlockScroll={false}
|
||||
menuShouldScrollIntoView={true}
|
||||
tabSelectsValue={true}
|
||||
openMenuOnFocus={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -30,7 +30,7 @@ const DialogOverlay = React.forwardRef<
|
||||
ref={ref}
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
Reference in New Issue
Block a user