AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-15 00:55:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: transition in simple select causes page crash (#16587)

Browse Source
This commit is contained in:
Joel 2025-03-24 11:07:16 +08:00 committed by GitHub
parent 17b4d4c7b2
commit cea4669b76
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
web/app/components/base/select/index.tsx
View File

@ -1,7 +1,7 @@
'use client' 'use client'
import type { FC } from 'react' import type { FC } from 'react'
import React, { Fragment, useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react' import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid' import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
import Badge from '../badge/index' import Badge from '../badge/index'
import { RiCheckLine } from '@remixicon/react' import { RiCheckLine } from '@remixicon/react'
@ -238,48 +238,40 @@ const SimpleSelect: FC<ISelectProps> = ({
)} )}
{!disabled && ( {!disabled && (
<Transition <ListboxOptions className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
as={Fragment} {items.map((item: Item) => (
leave="transition ease-in duration-100" <ListboxOption
leaveFrom="opacity-100" key={item.value}
leaveTo="opacity-0" className={
> classNames(
'relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary',
<ListboxOptions className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}> optionClassName,
{items.map((item: Item) => ( )
<ListboxOption }
key={item.value} value={item}
className={ disabled={disabled}
classNames( >
'relative cursor-pointer select-none py-2 pl-3 pr-9 rounded-lg hover:bg-state-base-hover text-text-secondary', {({ /* active, */ selected }) => (
optionClassName, <>
) {renderOption
} ? renderOption({ item, selected })
value={item} : (<>
disabled={disabled} <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
> {selected && !hideChecked && (
{({ /* active, */ selected }) => ( <span
<> className={classNames(
{renderOption 'absolute inset-y-0 right-0 flex items-center pr-4 text-text-accent',
? renderOption({ item, selected }) )}
: (<> >
<span className={classNames('block', selected && 'font-normal')}>{item.name}</span> <RiCheckLine className="h-4 w-4" aria-hidden="true" />
{selected && !hideChecked && ( </span>
<span )}
className={classNames( </>)}
'absolute inset-y-0 right-0 flex items-center pr-4 text-text-accent', </>
)} )}
> </ListboxOption>
<RiCheckLine className="h-4 w-4" aria-hidden="true" /> ))}
</span> </ListboxOptions>
)}
</>)}
</>
)}
</ListboxOption>
))}
</ListboxOptions>
</Transition>
)} )}
</div> </div>
</Listbox> </Listbox>