fix: remove misleading clear buttons and improve SimpleSelect UX (#23791)
This commit is contained in:
@@ -192,6 +192,7 @@ const SimpleSelect: FC<ISelectProps> = ({
|
||||
const localPlaceholder = placeholder || t('common.placeholder.select')
|
||||
|
||||
const [selectedItem, setSelectedItem] = useState<Item | null>(null)
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let defaultSelect = null
|
||||
@@ -220,8 +221,11 @@ const SimpleSelect: FC<ISelectProps> = ({
|
||||
<ListboxButton onClick={() => {
|
||||
// get data-open, use setTimeout to ensure the attribute is set
|
||||
setTimeout(() => {
|
||||
if (listboxRef.current)
|
||||
onOpenChange?.(listboxRef.current.getAttribute('data-open') !== null)
|
||||
if (listboxRef.current) {
|
||||
const isOpen = listboxRef.current.getAttribute('data-open') !== null
|
||||
setOpen(isOpen)
|
||||
onOpenChange?.(isOpen)
|
||||
}
|
||||
})
|
||||
}} className={classNames(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
|
||||
<span className={classNames('system-sm-regular block truncate text-left text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
|
||||
@@ -240,10 +244,17 @@ const SimpleSelect: FC<ISelectProps> = ({
|
||||
/>
|
||||
)
|
||||
: (
|
||||
<ChevronDownIcon
|
||||
className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
open ? (
|
||||
<ChevronUpIcon
|
||||
className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
<ChevronDownIcon
|
||||
className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
@@ -70,6 +70,7 @@ export default function LanguagePage() {
|
||||
items={languages.filter(item => item.supported)}
|
||||
onSelect={item => handleSelectLanguage(item)}
|
||||
disabled={editing}
|
||||
notClearable={true}
|
||||
/>
|
||||
</div>
|
||||
<div className='mb-8'>
|
||||
@@ -79,6 +80,7 @@ export default function LanguagePage() {
|
||||
items={timezones}
|
||||
onSelect={item => handleSelectTimezone(item)}
|
||||
disabled={editing}
|
||||
notClearable={true}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
Reference in New Issue
Block a user