- Notifications
You must be signed in to change notification settings - Fork2.8k
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
-
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>); |
BetaWas this translation helpful?Give feedback.
All reactions
Replies: 0 comments
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment