Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Combobox useComboboxFilter and Virtualizer buggy#35263

Unanswered
tomwjerry asked this question inQ&A
Discussion options

I am trying to combine useComboboxFilter and Virtualizer, but it gets buggy. Did I do things wrong? Am I perhaps better off with plain CSS styles? I got issues such as negative indexes, invalid array length, options being mixed up, and so on. Here is a sample code:

constuseStyles=makeStyles({listbox:{// maxHeight will be applied only positioning autoSize set.maxHeight:'250px'},option:{height:'32px'}});const{        virtualizerLength,        bufferItems,        bufferSize,        scrollRef,        containerSizeRef,}=useStaticVirtualizerMeasure({defaultItemSize:itemHeight,direction:'vertical',// We want at least 10 additional items on each side of visible// items for page up/down (+ 1 buffer)bufferItems:4,// We need to recalculate index when at least 10 items (+1px)// from the bottom or top for page up/downbufferSize:itemHeight*3+1,});const[options,setOptions]=React.useState([{id:1,children:undefined,value:'a',name:'A'},{id:2,children:undefined,value:'b',name:'B'},{id:3,children:undefined,value:'c',name:'C'},{id:4,children:undefined,value:'d',name:'D'},{id:5,children:undefined,value:'e',name:'E'},{id:6,children:undefined,value:'f',name:'F'},{id:7,children:undefined,value:'g',name:'G'},]);const[query,setQuery]=React.useState<string>('');constchildren=useComboboxFilter(query,options,{});conststyles=useStyles();constonChanged=(event:SelectionEvents,data:OptionOnSelectData):void=>{setQuery(data.optionText??'');};return(<Comboboxpositioning={{autoSize:false,position:'below'}}listbox={{ref:mergedRefs,className:styles.listbox}}      onOpenChange={(e,data)=>{clearScrollTimer();if(data.open){setScrollTimer(()=>{mergedRefs.current?.scrollTo({top:(itemHeight+rowGap)*selectedIndex.current,});},0);}}}onOptionSelect={onChanged}onChange={(ev:React.ChangeEvent<HTMLInputElement>)=>setQuery(ev.target.value)}value={query}><VirtualizernumItems={children.length>0 ?children.length :0}virtualizerLength={virtualizerLength}bufferItems={bufferItems}bufferSize={bufferSize}itemSize={itemHeight}containerSizeRef={containerSizeRef}gap={rowGap}>{(index:number)=>{if(index<0||index>=children.length||!children[index]){returnnull;}return(<OptionclassName={styles.option}aria-posinset={index}aria-setsize={numberOfItems}key={option[index].id}value={option[index].id}>{option[index].name}</Option>)}}</Virtualizer></Combobox>);
You must be logged in to vote

Replies: 0 comments

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
1 participant
@tomwjerry

[8]ページ先頭

©2009-2025 Movatter.jp