From 52b995401f82079c72a8208978a695022b8a9cff Mon Sep 17 00:00:00 2001
From: Franck Cornu <franck.cornu@exo.quebec>
Date: Wed, 27 Mar 2019 12:31:49 -0400
Subject: [PATCH 1/2] [ModernSearch] * Revert changes made to new
 SearchResultsContainer regarding new props handling.

---
 .../spfx/package-lock.json                    | 15 ++++++----
 .../SearchResultsContainer.tsx                | 28 ++++++++++++++-----
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/solutions/ModernSearch/react-search-refiners/spfx/package-lock.json b/solutions/ModernSearch/react-search-refiners/spfx/package-lock.json
index 00dec554..c5eb9564 100644
--- a/solutions/ModernSearch/react-search-refiners/spfx/package-lock.json
+++ b/solutions/ModernSearch/react-search-refiners/spfx/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "pnp-react-search-refiners",
-  "version": "2.4.0",
+  "version": "3.0.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -7080,7 +7080,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7495,7 +7496,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7551,6 +7553,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7594,12 +7597,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchResults/components/SearchResultsContainer/SearchResultsContainer.tsx b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchResults/components/SearchResultsContainer/SearchResultsContainer.tsx
index 73f56f37..07ced796 100644
--- a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchResults/components/SearchResultsContainer/SearchResultsContainer.tsx
+++ b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchResults/components/SearchResultsContainer/SearchResultsContainer.tsx
@@ -206,12 +206,20 @@ export default class SearchResultsContainer extends React.Component<ISearchResul
     }
 
     public async componentWillReceiveProps(nextProps: ISearchResultsContainerProps) {
-
+        let executeSearch = false;
+        let isPageChanged = false;
+        let selectedPage = 1;
         let lastSelectedProperties = (this.props.searchService.selectedProperties) ? this.props.searchService.selectedProperties.join(',') : undefined;
         let lastQuery = this.props.queryKeywords + this.props.searchService.queryTemplate + lastSelectedProperties;
         let nextSelectedProperties = (nextProps.searchService.selectedProperties) ? nextProps.searchService.selectedProperties.join(',') : undefined;
         let query = nextProps.queryKeywords + nextProps.searchService.queryTemplate + nextSelectedProperties;
 
+        if (this.props.selectedPage !== nextProps.selectedPage) {
+            executeSearch = true;
+            isPageChanged = true;
+            selectedPage = nextProps.selectedPage;
+        }
+
         // New props are passed to the component when the search query has been changed
         if (JSON.stringify(this.props.searchService.refiners) !== JSON.stringify(nextProps.searchService.refiners)
             || JSON.stringify(this.props.searchService.refinementFilters) != JSON.stringify(nextProps.searchService.refinementFilters)
@@ -223,13 +231,16 @@ export default class SearchResultsContainer extends React.Component<ISearchResul
             || this.props.queryKeywords !== nextProps.queryKeywords
             || this.props.enableLocalization !== nextProps.enableLocalization
             || this.props.rendererId !== nextProps.rendererId
-            || this.props.customTemplateFieldValues !== nextProps.customTemplateFieldValues
-            || this.props.selectedPage !== nextProps.selectedPage) {
-
+            || this.props.customTemplateFieldValues !== nextProps.customTemplateFieldValues) {
+            executeSearch = true;
+            isPageChanged = false;
+            selectedPage = 1;
             if (lastQuery !== query) {
                 nextProps.searchService.refinementFilters = [];
             }
+        }
 
+        if (executeSearch) {
             // Don't perform search is there is no keywords
             if (nextProps.queryKeywords) {
                 try {
@@ -240,11 +251,14 @@ export default class SearchResultsContainer extends React.Component<ISearchResul
                         errorMessage: ""
                     });
 
-                    // Set the focus at the top of the component
-                    this._searchWpRef.focus();
+                    if (isPageChanged)
+                    {
+                        // Set the focus at the top of the component
+                        this._searchWpRef.focus();
+                    }
 
                     // We reset the page number and refinement filters
-                    const searchResults = await nextProps.searchService.search(nextProps.queryKeywords, nextProps.selectedPage);
+                    const searchResults = await nextProps.searchService.search(nextProps.queryKeywords, selectedPage);
 
                     // Translates taxonomy refiners and result values by using terms ID
                     if (nextProps.enableLocalization) {

From 6bb810c7ec2fc8f4d7cc66914726f7593ea128c3 Mon Sep 17 00:00:00 2001
From: Franck Cornu <franck.cornu@exo.quebec>
Date: Mon, 6 May 2019 15:33:22 -0400
Subject: [PATCH 2/2] [ModernSearch] - Fixed issue on group expand/collapse
 defaults https://github.com/SharePoint/sp-dev-solutions/issues/145

---
 .../Layouts/LinkPanel/ILinkPanelState.ts      |   5 +-
 .../Layouts/LinkPanel/LinkPanel.tsx           | 188 ++++++++++--------
 .../Layouts/Vertical/IVerticalState.tsx       |   5 +-
 .../components/Layouts/Vertical/Vertical.tsx  | 157 ++++++++-------
 .../searchResults/SearchResultsWebPart.ts     |   4 +-
 5 files changed, 200 insertions(+), 159 deletions(-)

diff --git a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/LinkPanel/ILinkPanelState.ts b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/LinkPanel/ILinkPanelState.ts
index 09560011..4ac4ea08 100644
--- a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/LinkPanel/ILinkPanelState.ts
+++ b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/LinkPanel/ILinkPanelState.ts
@@ -1,9 +1,10 @@
 import { IRefinementValue } from "../../../../../models/ISearchResult";
+import { IGroup } from "office-ui-fabric-react/lib/components/GroupedList";
 
 interface ILinkPanelState {
     showPanel?: boolean;
-    valueToRemove: IRefinementValue;
-    expandedGroups?: string[];
+    groups?: IGroup[];
+    items?: JSX.Element[];
 }
 
 export default ILinkPanelState;
\ No newline at end of file
diff --git a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/LinkPanel/LinkPanel.tsx b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/LinkPanel/LinkPanel.tsx
index 47d1cbf4..5fddda1e 100644
--- a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/LinkPanel/LinkPanel.tsx
+++ b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/LinkPanel/LinkPanel.tsx
@@ -7,7 +7,8 @@ import * as update from                                                'immutabi
 import {
     GroupedList,
     IGroup,
-    IGroupDividerProps
+    IGroupDividerProps,
+    IGroupedList
 } from                                                                 'office-ui-fabric-react/lib/components/GroupedList/index';
 import { Scrollbars } from                                             'react-custom-scrollbars';
 import {Link} from 'office-ui-fabric-react/lib/Link';
@@ -15,18 +16,22 @@ import {ActionButton} from 'office-ui-fabric-react/lib/Button';
 import styles from './LinkPanel.module.scss';
 import * as strings from 'SearchRefinersWebPartStrings';
 import TemplateRenderer from '../../Templates/TemplateRenderer';
-import { IRefinementResult } from '../../../../../models/ISearchResult';
+import { IRefinementResult, IRefinementValue } from '../../../../../models/ISearchResult';
 import IRefinerConfiguration from '../../../../../models/IRefinerConfiguration';
+import IFilterLayoutProps from '../IFilterLayoutProps';
+import { isEqual } from '@microsoft/sp-lodash-subset';
 
 export default class LinkPanel extends React.Component<ILinkPanelProps, ILinkPanelState> {
 
+    private _groupedList: IGroupedList;
+
     public constructor(props: ILinkPanelProps) {
         super(props);
 
         this.state = {
             showPanel: false,
-            expandedGroups: [],
-            valueToRemove: null
+            items: [],
+            groups: []
         };
 
         this._onTogglePanel = this._onTogglePanel.bind(this);
@@ -39,58 +44,6 @@ export default class LinkPanel extends React.Component<ILinkPanelProps, ILinkPan
 
     public render(): React.ReactElement<ILinkPanelProps> {
 
-        let items: JSX.Element[] = [];
-        let groups: IGroup[] = [];
-
-        if (this.props.refinementResults.length === 0) return <span />;
-
-        // Initialize the Office UI grouped list
-        this.props.refinementResults.map((refinementResult, i) => {
-
-            // Get group name
-            let groupName = refinementResult.FilterName;
-            const configuredFilter = this.props.refinersConfiguration.filter(e => { return e.refinerName === refinementResult.FilterName;});
-            groupName = configuredFilter.length > 0 && configuredFilter[0].displayValue ? configuredFilter[0].displayValue : groupName;
-
-            groups.push({
-                key: i.toString(),
-                name: groupName,
-                count: 1,
-                startIndex: i,
-                isDropEnabled: true,
-                isCollapsed: this.state.expandedGroups.indexOf(groupName) === -1 ? true : false
-            });
-
-            // Get selected values for this specfic refiner
-            // This scenario happens due to the behavior of the Office UI Fabric GroupedList component who recreates child components when a greoup is collapsed/expanded, causing a state reset for sub components
-            // In this case we use the refiners global state to recreate the 'local' state for this component  
-            const selectedFilter = this.props.selectedFilters.filter(filter => { return filter.FilterName === refinementResult.FilterName;});
-            const selectedFilterValues = selectedFilter.length === 1 ? selectedFilter[0].Values : [];
-
-            // Check if the value to remove concerns this refinement result
-            let valueToRemove = null;
-            if (this.state.valueToRemove) {
-                if (refinementResult.Values.filter(value => { 
-                    return value.RefinementToken === this.state.valueToRemove.RefinementToken || refinementResult.FilterName === this.state.valueToRemove.RefinementName; }).length > 0
-                ) {
-                    valueToRemove = this.state.valueToRemove;
-                }
-            }
-
-            items.push(
-                <TemplateRenderer 
-                    key={i} 
-                    refinementResult={refinementResult}
-                    shouldResetFilters={this.props.shouldResetFilters}
-                    templateType={configuredFilter[0].template}
-                    valueToRemove={valueToRemove}
-                    onFilterValuesUpdated={this.props.onFilterValuesUpdated}
-                    language={this.props.language}
-                    selectedValues={selectedFilterValues}
-                />
-            );
-        });
-
         const renderSelectedFilterValues: JSX.Element[] = this.props.selectedFilterValues.map((value) => {
 
             // Get the 'display name' of the associated refiner for this value
@@ -105,9 +58,8 @@ export default class LinkPanel extends React.Component<ILinkPanelProps, ILinkPan
             return (
                 <Label className={styles.filter}>
                     <i className='ms-Icon ms-Icon--ClearFilter' onClick={() => { 
-                        this.setState({
-                            valueToRemove: value
-                        });
+                        this._initItems(this.props, value);
+                        this._groupedList.forceUpdate();
                     }}></i>
                     {filterName}
                 </Label>);
@@ -115,7 +67,8 @@ export default class LinkPanel extends React.Component<ILinkPanelProps, ILinkPan
 
         const renderAvailableFilters = <GroupedList
             ref='groupedList'
-            items={items}
+            componentRef={ (g) => { this._groupedList = g; }}
+            items={this.state.items}
             onRenderCell={this._onRenderCell}
             className={styles.linkPanelLayout__filterPanel__body__group}
             groupProps={
@@ -123,7 +76,7 @@ export default class LinkPanel extends React.Component<ILinkPanelProps, ILinkPan
                     onRenderHeader: this._onRenderHeader
                 }
             }
-            groups={groups} />;
+            groups={this.state.groups} />;
 
             const renderLinkRemoveAll = this.props.hasSelectedValues ?
                                         (<div className={`${styles.linkPanelLayout__filterPanel__body__removeAllFilters} ${this.props.hasSelectedValues && "hiddenLink"}`}>
@@ -180,15 +133,22 @@ export default class LinkPanel extends React.Component<ILinkPanelProps, ILinkPan
     }
 
     public componentDidMount() {
-       this._initExpandedGroups(this.props.refinementResults, this.props.refinersConfiguration);
+        this._initGroups(this.props);
+        this._initItems(this.props);
     }
 
     public componentWillReceiveProps(nextProps: ILinkPanelProps) {
-        this.setState({
-            valueToRemove: null
-        });
+        let shouldReset = false;
+
+        if (!isEqual(this.props.refinersConfiguration, nextProps.refinersConfiguration)) {
+            shouldReset = true;
+        }
+
+        this._initGroups(nextProps, shouldReset);
+        this._initItems(nextProps);
 
-        this._initExpandedGroups(nextProps.refinementResults, nextProps.refinersConfiguration);
+        // Need to force an update manually because nor items or groups update will be considered as an update by the GroupedList component.
+        this._groupedList.forceUpdate();  
     }
 
     private _onRenderCell(nestingDepth: number, item: any, itemIndex: number) {
@@ -205,16 +165,7 @@ export default class LinkPanel extends React.Component<ILinkPanelProps, ILinkPan
             <div className={ styles.linkPanelLayout__filterPanel__body__group__header }
                 style={props.groupIndex > 0 ? { marginTop: '10px' } : undefined }
                 onClick={() => {
-
-                    // Update the index for expanded groups to be able to keep it open after a re-render
-                    const updatedExpandedGroups =
-                        props.group.isCollapsed ?
-                            update(this.state.expandedGroups, { $push: [props.group.name] }) :
-                            update(this.state.expandedGroups, { $splice: [[this.state.expandedGroups.indexOf(props.group.name), 1]] });
-
-                    this.setState({
-                        expandedGroups: updatedExpandedGroups,
-                    });
+                    props.onToggleCollapse(props.group);
                 }}>
                 <div className={styles.linkPanelLayout__filterPanel__body__headerIcon}>
                     <i className={props.group.isCollapsed ? 'ms-Icon ms-Icon--ChevronDown' : 'ms-Icon ms-Icon--ChevronUp'}></i>
@@ -241,21 +192,86 @@ export default class LinkPanel extends React.Component<ILinkPanelProps, ILinkPan
      * @param refinementResults the refinements results
      * @param refinersConfiguration the current refiners configuration
      */
-    private _initExpandedGroups(refinementResults: IRefinementResult[], refinersConfiguration: IRefinerConfiguration[]) {
+    private _initGroups(props: IFilterLayoutProps, shouldResetCollapse?: boolean) {
 
-        refinementResults.map((refinementResult, i) => {
+        let groups: IGroup[] = [];
+        props.refinementResults.map((refinementResult, i) => {
 
             // Get group name
             let groupName = refinementResult.FilterName;
-            const configuredFilter = refinersConfiguration.filter(e => { return e.refinerName === refinementResult.FilterName;});
-            groupName = configuredFilter.length > 0 && configuredFilter[0].displayValue ? configuredFilter[0].displayValue : groupName;
-            const showExpanded = configuredFilter.length > 0 && configuredFilter[0].showExpanded ? configuredFilter[0].showExpanded : false;
-
-            if (showExpanded) {
-                this.setState({
-                    expandedGroups: update(this.state.expandedGroups, { $push: [groupName] })
-                });
+            const configuredFilters = props.refinersConfiguration.filter(e => { return e.refinerName === refinementResult.FilterName;});
+            groupName = configuredFilters.length > 0 && configuredFilters[0].displayValue ? configuredFilters[0].displayValue : groupName;
+            let isCollapsed = true;
+
+            const existingGroups = this.state.groups.filter(g => { return g.name === groupName;});
+
+            if (existingGroups.length > 0 && !shouldResetCollapse) {
+                isCollapsed = existingGroups[0].isCollapsed;
+            } else {
+                isCollapsed = configuredFilters.length > 0 && configuredFilters[0].showExpanded ? !configuredFilters[0].showExpanded : true;
             }
+
+            let group: IGroup = {
+                key: i.toString(),
+                name: groupName,
+                count: 1,
+                startIndex: i,
+                isCollapsed: isCollapsed
+            };
+
+            groups.push(group);
+        });
+
+        this.setState({
+            groups: update(this.state.groups, { $set: groups })
+        });
+    }
+
+    /**
+     * Initializes items in for goups in the GroupedList
+     * @param refinementResults the refinements results
+     */
+    private _initItems(props: IFilterLayoutProps, refinementValueToRemove?: IRefinementValue): void {
+
+        let items: JSX.Element[] = [];
+
+        // Initialize the Office UI grouped list
+        props.refinementResults.map((refinementResult, i) => {
+
+            const configuredFilter = props.refinersConfiguration.filter(e => { return e.refinerName === refinementResult.FilterName; });
+
+            // Get selected values for this specfic refiner
+            // This scenario happens due to the behavior of the Office UI Fabric GroupedList component who recreates child components when a greoup is collapsed/expanded, causing a state reset for sub components
+            // In this case we use the refiners global state to recreate the 'local' state for this component
+            const selectedFilter = props.selectedFilters.filter(filter => { return filter.FilterName === refinementResult.FilterName; });
+            const selectedFilterValues = selectedFilter.length === 1 ? selectedFilter[0].Values : [];
+
+           // Check if the value to remove concerns this refinement result
+           let valueToRemove = null;
+           if (refinementValueToRemove) {
+               if (refinementResult.Values.filter(value => { 
+                   return value.RefinementToken ===refinementValueToRemove.RefinementToken || refinementResult.FilterName === refinementValueToRemove.RefinementName; }).length > 0
+               ) {
+                   valueToRemove = refinementValueToRemove;
+               }
+           }
+
+           items.push(
+               <TemplateRenderer 
+                   key={i} 
+                   refinementResult={refinementResult}
+                   shouldResetFilters={props.shouldResetFilters}
+                   templateType={configuredFilter[0].template}
+                   valueToRemove={valueToRemove}
+                   onFilterValuesUpdated={props.onFilterValuesUpdated}
+                   language={props.language}
+                   selectedValues={selectedFilterValues}
+               />
+           );
+        });
+
+        this.setState({
+            items: update(this.state.items, { $set: items })
         });
     }
 }
\ No newline at end of file
diff --git a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/Vertical/IVerticalState.tsx b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/Vertical/IVerticalState.tsx
index 973985eb..9a408aef 100644
--- a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/Vertical/IVerticalState.tsx
+++ b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/Vertical/IVerticalState.tsx
@@ -1,5 +1,8 @@
+import { IGroup } from "office-ui-fabric-react/lib/components/GroupedList";
+
 interface IVerticalState {
-    expandedGroups?: string[];
+    groups?: IGroup[];
+    items?: JSX.Element[];
 }
 
 export default IVerticalState;
\ No newline at end of file
diff --git a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/Vertical/Vertical.tsx b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/Vertical/Vertical.tsx
index def79cd6..6fec46a9 100644
--- a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/Vertical/Vertical.tsx
+++ b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchRefiners/components/Layouts/Vertical/Vertical.tsx
@@ -5,22 +5,25 @@ import * as update from 'immutability-helper';
 import {
     GroupedList,
     IGroup,
-    IGroupDividerProps
+    IGroupDividerProps,
+    IGroupedList
 } from 'office-ui-fabric-react/lib/components/GroupedList/index';
 import {Link} from 'office-ui-fabric-react/lib/Link';
 import styles from './Vertical.module.scss';
 import * as strings from 'SearchRefinersWebPartStrings';
 import TemplateRenderer from '../../Templates/TemplateRenderer';
-import { IRefinementResult } from '../../../../../models/ISearchResult';
-import IRefinerConfiguration from '../../../../../models/IRefinerConfiguration';
+import { isEqual } from '@microsoft/sp-lodash-subset';
 
 export default class Vertical extends React.Component<IFilterLayoutProps, IVerticalState> {
 
+    private _groupedList: IGroupedList;
+
     public constructor(props: IFilterLayoutProps) {
         super(props);
 
         this.state = {
-            expandedGroups: []
+            items: [],
+            groups: []
         };
 
         this._removeAllFilters = this._removeAllFilters.bind(this);
@@ -30,49 +33,12 @@ export default class Vertical extends React.Component<IFilterLayoutProps, IVerti
 
     public render(): React.ReactElement<IFilterLayoutProps> {
 
-        let items: JSX.Element[] = [];
-        let groups: IGroup[] = [];
         let noResultsElement: JSX.Element;
 
-        // Initialize the Office UI grouped list
-        this.props.refinementResults.map((refinementResult, i) => {
-
-            // Get group name
-            let groupName = refinementResult.FilterName;
-            const configuredFilter = this.props.refinersConfiguration.filter(e => { return e.refinerName === refinementResult.FilterName; });
-            groupName = configuredFilter.length > 0 && configuredFilter[0].displayValue ? configuredFilter[0].displayValue : groupName;
-            
-            groups.push({
-                key: i.toString(),
-                name: groupName,
-                count: 1,
-                startIndex: i,
-                isDropEnabled: true,
-                isCollapsed: this.state.expandedGroups.indexOf(groupName) === -1 ? true : false
-            });
-
-            // Get selected values for this specfic refiner
-            // This scenario happens due to the behavior of the Office UI Fabric GroupedList component who recreates child components when a greoup is collapsed/expanded, causing a state reset for sub components
-            // In this case we use the refiners global state to recreate the 'local' state for this component
-            const selectedFilter = this.props.selectedFilters.filter(filter => { return filter.FilterName === refinementResult.FilterName; });
-            const selectedFilterValues = selectedFilter.length === 1 ? selectedFilter[0].Values : [];
-
-            items.push(
-                <TemplateRenderer
-                    key={i}
-                    refinementResult={refinementResult}
-                    shouldResetFilters={this.props.shouldResetFilters}
-                    templateType={configuredFilter[0].template}
-                    onFilterValuesUpdated={this.props.onFilterValuesUpdated}
-                    language={this.props.language}
-                    selectedValues={selectedFilterValues}
-                />
-            );
-        });
-
         const renderAvailableFilters = (this.props.refinementResults.length > 0) ? <GroupedList
             ref='groupedList'
-            items={items}
+            items={this.state.items}
+            componentRef={ (g) => { this._groupedList = g; }}
             onRenderCell={this._onRenderCell}
             className={styles.verticalLayout__filterPanel__body__group}
             groupProps={
@@ -80,7 +46,7 @@ export default class Vertical extends React.Component<IFilterLayoutProps, IVerti
                     onRenderHeader: this._onRenderHeader,
                 }
             }
-            groups={groups} /> : noResultsElement;
+            groups={this.state.groups} /> : noResultsElement;
 
         const renderLinkRemoveAll = this.props.hasSelectedValues ?
             (<div className={`${styles.verticalLayout__filterPanel__body__removeAllFilters} ${this.props.hasSelectedValues && "hiddenLink"}`}>
@@ -98,11 +64,23 @@ export default class Vertical extends React.Component<IFilterLayoutProps, IVerti
     }
 
     public componentDidMount() {
-        this._initExpandedGroups(this.props.refinementResults, this.props.refinersConfiguration);
+        this._initGroups(this.props);
+        this._initItems(this.props);
     }
 
-    public componentWillReceiveProps(nextProps: IFilterLayoutProps) {
-        this._initExpandedGroups(nextProps.refinementResults, nextProps.refinersConfiguration);
+    public componentWillReceiveProps(nextProps: IFilterLayoutProps) {      
+        
+        let shouldReset = false;
+
+        if (!isEqual(this.props.refinersConfiguration, nextProps.refinersConfiguration)) {
+            shouldReset = true;
+        }
+
+        this._initGroups(nextProps, shouldReset);
+        this._initItems(nextProps);
+
+        // Need to force an update manually because nor items or groups update will be considered as an update by the GroupedList component.
+        this._groupedList.forceUpdate();        
     }
 
     private _onRenderCell(nestingDepth: number, item: any, itemIndex: number) {
@@ -119,17 +97,6 @@ export default class Vertical extends React.Component<IFilterLayoutProps, IVerti
             <div className={styles.verticalLayout__filterPanel__body__group__header}
                 style={props.groupIndex > 0 ? { marginTop: '10px' } : undefined}
                 onClick={() => {
-
-                    // Update the index for expanded groups to be able to keep it open after a re-render
-                    const updatedExpandedGroups =
-                        props.group.isCollapsed ?
-                            update(this.state.expandedGroups, { $push: [props.group.name] }) :
-                            update(this.state.expandedGroups, { $splice: [[this.state.expandedGroups.indexOf(props.group.name), 1]] });
-
-                    this.setState({
-                        expandedGroups: updatedExpandedGroups,
-                    });
-
                     props.onToggleCollapse(props.group);
                 }}>
                 <div className={styles.verticalLayout__filterPanel__body__headerIcon}>
@@ -149,21 +116,75 @@ export default class Vertical extends React.Component<IFilterLayoutProps, IVerti
      * @param refinementResults the refinements results
      * @param refinersConfiguration the current refiners configuration
      */
-    private _initExpandedGroups(refinementResults: IRefinementResult[], refinersConfiguration: IRefinerConfiguration[]) {
+    private _initGroups(props: IFilterLayoutProps, shouldResetCollapse?: boolean) {
 
-        refinementResults.map((refinementResult, i) => {
+        let groups: IGroup[] = [];
+        props.refinementResults.map((refinementResult, i) => {
 
             // Get group name
             let groupName = refinementResult.FilterName;
-            const configuredFilter = refinersConfiguration.filter(e => { return e.refinerName === refinementResult.FilterName;});
-            groupName = configuredFilter.length > 0 && configuredFilter[0].displayValue ? configuredFilter[0].displayValue : groupName;
-            const showExpanded = configuredFilter.length > 0 && configuredFilter[0].showExpanded ? configuredFilter[0].showExpanded : false;
-
-            if (showExpanded) {
-                this.setState({
-                    expandedGroups: update(this.state.expandedGroups, { $push: [groupName] })
-                });
+            const configuredFilters = props.refinersConfiguration.filter(e => { return e.refinerName === refinementResult.FilterName;});
+            groupName = configuredFilters.length > 0 && configuredFilters[0].displayValue ? configuredFilters[0].displayValue : groupName;
+            let isCollapsed = true;
+
+            const existingGroups = this.state.groups.filter(g => { return g.name === groupName;});
+
+            if (existingGroups.length > 0 && !shouldResetCollapse) {
+                isCollapsed = existingGroups[0].isCollapsed;
+            } else {
+                isCollapsed = configuredFilters.length > 0 && configuredFilters[0].showExpanded ? !configuredFilters[0].showExpanded : true;
             }
+
+            let group: IGroup = {
+                key: i.toString(),
+                name: groupName,
+                count: 1,
+                startIndex: i,
+                isCollapsed: isCollapsed
+            };
+
+            groups.push(group);
+        });
+
+        this.setState({
+            groups: update(this.state.groups, { $set: groups })
+        });
+    }
+
+    /**
+     * Initializes items in for goups in the GroupedList
+     * @param refinementResults the refinements results
+     */
+    private _initItems(props: IFilterLayoutProps): void {
+
+        let items: JSX.Element[] = [];
+
+        // Initialize the Office UI grouped list
+        props.refinementResults.map((refinementResult, i) => {
+
+            const configuredFilter = props.refinersConfiguration.filter(e => { return e.refinerName === refinementResult.FilterName; });
+
+            // Get selected values for this specfic refiner
+            // This scenario happens due to the behavior of the Office UI Fabric GroupedList component who recreates child components when a greoup is collapsed/expanded, causing a state reset for sub components
+            // In this case we use the refiners global state to recreate the 'local' state for this component
+            const selectedFilter = props.selectedFilters.filter(filter => { return filter.FilterName === refinementResult.FilterName; });
+            const selectedFilterValues = selectedFilter.length === 1 ? selectedFilter[0].Values : [];
+
+            items.push(
+                <TemplateRenderer
+                    key={i}
+                    refinementResult={refinementResult}
+                    shouldResetFilters={props.shouldResetFilters}
+                    templateType={configuredFilter[0].template}
+                    onFilterValuesUpdated={props.onFilterValuesUpdated}
+                    language={props.language}
+                    selectedValues={selectedFilterValues}
+                />
+            );
+        });
+
+        this.setState({
+            items: update(this.state.items, { $set: items })
         });
     }
 }
\ No newline at end of file
diff --git a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchResults/SearchResultsWebPart.ts b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchResults/SearchResultsWebPart.ts
index f6d3f6d3..b9604acd 100644
--- a/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchResults/SearchResultsWebPart.ts
+++ b/solutions/ModernSearch/react-search-refiners/spfx/src/webparts/searchResults/SearchResultsWebPart.ts
@@ -27,7 +27,7 @@ import ISearchService from '../../services/SearchService/ISearchService';
 import ITaxonomyService from '../../services/TaxonomyService/ITaxonomyService';
 import ResultsLayoutOption from '../../models/ResultsLayoutOption';
 import TemplateService from '../../services/TemplateService/TemplateService';
-import { isEmpty, find } from '@microsoft/sp-lodash-subset';
+import { isEmpty, find, sortBy } from '@microsoft/sp-lodash-subset';
 import MockSearchService from '../../services/SearchService/MockSearchService';
 import MockTemplateService from '../../services/TemplateService/MockTemplateService';
 import SearchService from '../../services/SearchService/SearchService';
@@ -128,7 +128,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
         if (this._refinerSourceData) {
             const refinerSourceData: IRefinerSourceData = this._refinerSourceData.tryGetValue();
             if (refinerSourceData) {
-                refinerConfiguration = refinerSourceData.refinerConfiguration;
+                refinerConfiguration = sortBy(refinerSourceData.refinerConfiguration, 'sortIdx');
                 selectedFilters = refinerSourceData.selectedFilters;
                 this._searchService = update(this._searchService, {refinementFilters: { $set: selectedFilters }, refiners: { $set: refinerConfiguration }});
             }