Commit8ff4ba0

authored

fix: scroll item list into view when openingMultiSelectCombobox (#19806)

1 parentc9a877a commit8ff4ba0Copy full SHA for 8ff4ba0

File tree

+11

-1

lines changed

+11

-1

lines changed

Lines changed: 11 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -216,6 +216,7 @@ export const MultiSelectCombobox = forwardRef<`
`216`	`216`	`const[onScrollbar,setOnScrollbar]=useState(false);`
`217`	`217`	`const[isLoading,setIsLoading]=useState(false);`
`218`	`218`	`constdropdownRef=useRef<HTMLDivElement>(null);`
	`219`	`+constlistRef=useRef<HTMLDivElement>(null);`
`219`	`220`
`220`	`221`	`const[selected,setSelected]=useState<Option[]>(`
`221`	`222`	`arrayDefaultOptions??[],`
`@@ -364,6 +365,15 @@ export const MultiSelectCombobox = forwardRef<`
`364`	`365`	`voidexec();`
`365`	`366`	`},[debouncedSearchTerm,groupBy,open,triggerSearchOnFocus,onSearch]);`
`366`	`367`
	`368`	`+// Scroll dropdown into view on open`
	`369`	`+useEffect(()=>{`
	`370`	`+if(!open\|\|!listRef.current){`
	`371`	`+return;`
	`372`	`+}`
	`373`	`+`
	`374`	`+listRef.current.scrollIntoView({behavior:"smooth"});`
	`375`	`+},[open]);`
	`376`	`+`
`367`	`377`	`constCreatableItem=()=>{`
`368`	`378`	`if(!creatable){`
`369`	`379`	`returnundefined;`
`@@ -603,7 +613,7 @@ export const MultiSelectCombobox = forwardRef<`
`603`	`613`	`</div>`
`604`	`614`	`</div>`
`605`	`615`	`</div>`
`606`		`-<divclassName="relative">`
	`616`	`+<divclassName="relative"ref={listRef}>`
`607`	`617`	`{open&&(`
`608`	`618`	`<CommandList`
`609`	`619`	className={`absolute top-1 z-10 w-full rounded-md

Comments

(0)