JoshMarler / react-juce

Write cross-platform native apps with React.js and JUCE
https://docs.react-juce.dev
MIT License
763 stars 79 forks source link

Fix ListView render + selection when height == 0 (pre onMeasure hook) #273

Closed JoshMarler closed 3 years ago

JoshMarler commented 3 years ago

@nick-thompson , this fixes some issues I've been seeing in list view. It stops us from index out of bounds into user supplied data and also resolves issues with selection in list items.

I had a case similar to below:

const BrowserItem = ({item, browserState, ...props}) => {
    const onClick = (_e) => {
        browserState.setFilterTerm("category", item.category);
    }

    const active = browserState.filterTerms.get("category") === item.category;

     const styles = active
          ? {...BrowserStyles.browserItem, ...BrowserStyles.browserItemActive}
          : { ...BrowserStyles.browserItem};

     return (
         <View
             {...props}
             {...styles}
             onClick={onClick}
         >
         { /* Other components here */ }
         </View>
     )
}

In the above, item.category is always unique, i.e. with 7 categories there will be 7 items in the ListView, my renderItem prop passed to list view is a function returning a BrowserItem instance and the ListView data prop is populated with an array of 7 categories. Without the above fix I was seeing random multiple selections and should only be able to "select" a single item at a time in the browser. I believe this has something to do with the fact that we first render the ListView when added to the component tree and then again in response to onMeasure, presumably this a result of our change in ListView which deliberately fixes the key prop on list items.