fix not being able to select a model in dialog

This commit is contained in:
Zane Staggs
2025-07-09 19:20:12 -07:00
parent 8d482af0e7
commit 5435ce5cd9
2 changed files with 24 additions and 11 deletions
+23 -10
View File
@@ -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}
/>
);
};
+1 -1
View File
@@ -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}