|
|
@@ -109,15 +109,16 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
|
|
|
|
|
|
createEffect(
|
|
|
on([() => store.filter, () => props.current], ([filter, current]) => {
|
|
|
- if (filter.length > 0) {
|
|
|
- setStore("selected", 0)
|
|
|
- } else if (current) {
|
|
|
- const currentIndex = flat().findIndex((opt) => isDeepEqual(opt.value, current))
|
|
|
- if (currentIndex >= 0) {
|
|
|
- setStore("selected", currentIndex)
|
|
|
+ setTimeout(() => {
|
|
|
+ if (filter.length > 0) {
|
|
|
+ moveTo(0, true)
|
|
|
+ } else if (current) {
|
|
|
+ const currentIndex = flat().findIndex((opt) => isDeepEqual(opt.value, current))
|
|
|
+ if (currentIndex >= 0) {
|
|
|
+ moveTo(currentIndex, true)
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- scroll?.scrollTo(0)
|
|
|
+ }, 0)
|
|
|
}),
|
|
|
)
|
|
|
|
|
|
@@ -129,7 +130,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
|
|
|
moveTo(next)
|
|
|
}
|
|
|
|
|
|
- function moveTo(next: number) {
|
|
|
+ function moveTo(next: number, center = false) {
|
|
|
setStore("selected", next)
|
|
|
props.onMove?.(selected()!)
|
|
|
if (!scroll) return
|
|
|
@@ -138,13 +139,18 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
|
|
|
})
|
|
|
if (!target) return
|
|
|
const y = target.y - scroll.y
|
|
|
- if (y >= scroll.height) {
|
|
|
- scroll.scrollBy(y - scroll.height + 1)
|
|
|
- }
|
|
|
- if (y < 0) {
|
|
|
- scroll.scrollBy(y)
|
|
|
- if (isDeepEqual(flat()[0].value, selected()?.value)) {
|
|
|
- scroll.scrollTo(0)
|
|
|
+ if (center) {
|
|
|
+ const centerOffset = Math.floor(scroll.height / 2)
|
|
|
+ scroll.scrollBy(y - centerOffset)
|
|
|
+ } else {
|
|
|
+ if (y >= scroll.height) {
|
|
|
+ scroll.scrollBy(y - scroll.height + 1)
|
|
|
+ }
|
|
|
+ if (y < 0) {
|
|
|
+ scroll.scrollBy(y)
|
|
|
+ if (isDeepEqual(flat()[0].value, selected()?.value)) {
|
|
|
+ scroll.scrollTo(0)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|