Does not work ListIndex

There is a list of fonts. The user selects a font, closes the list. Opens the list again and the user automatically scrolls to the desired font.

  <ListIndex listEl="list.virtual-list" scrollList={true} label={true}>
            <List virtualList virtualListParams={{
                items: fonts,
                renderExternal: renderExternal,
            }}>
                <ul>
                    {vlFonts.vlData.items.map((item, index) => (
                        <ListItem
                            key={index}
                            radio
                            checked={curFontName === item.name}
                            title={item.name}
                            style={{fontFamily: `${item.name}`, top: `${vlFonts.vlData.topPosition}px`}}
                            onClick={() => { props.changeFont(item.name)}}
                        ></ListItem>
                    ))}
                </ul>
            </List>
        </ListIndex>

I use ListIndex, but when clicking on the font list, an error occurs - Cannot read property ‘offsetHeight’ of undefined. What am I doing wrong?

Wondering where did you find such usage example? List Index React Component | Framework7 React Documentation

  1. ListIndex doesn’t accept any children elements
  2. It is not compatible with Virtual List
1 Like

You’re right. I used the ListIndex incorrectly. I need to make sure that when I click on the menu - “Fonts”, I can automatically scroll to the desired font. I use the useR ef hook, but in framework 7 it is impossible to use the ref attribute to ListItem components. Maybe there are other options, please help?

I think ListIndex is not the best solution for my task