FilePicker Tile view fix (pnp#1285)

* Add `.github/fabricbot.json`

* Fix issue with FilePicker Tile view and selection of file

* Typo

Co-authored-by: msftbot[bot] <48340428+msftbot[bot]@users.noreply.github.com>
Co-authored-by: Alex Terentiev <[email protected]>

Author: 3 people

src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx

@@ -196,7 +196,7 @@ export class FileBrowser extends React.Component<IFileBrowserProps, IFileBrowser
                       />) :
                     (<TilesList
                       fileBrowserService={this.props.fileBrowserService}
-                      filePickerResult={this.state.filePickerResults ? this.state.filePickerResults[0] : null}
+                      filePickerResults={this.state.filePickerResults ? this.state.filePickerResults : null}
                       selection={this._selection}
                       items={this.state.items}
                       onFolderOpen={this._handleOpenFolder}
@@ -519,6 +519,8 @@ export class FileBrowser extends React.Component<IFileBrowserProps, IFileBrowser
         newItems.push(null);
       }
 
+      this._selection.setItems(newItems);
+
       if (!concatenateResults) {
         // de-select anything that was previously selected
         this._selection.setAllSelected(false);

src/controls/filePicker/controls/TilesList/ITilesListProps.ts

@@ -5,7 +5,7 @@ import { IFilePickerResult } from "../../FilePicker.types";
 
 export interface ITilesListProps {
   fileBrowserService: FileBrowserService;
-  filePickerResult: IFilePickerResult;
+  filePickerResults: IFilePickerResult[];
   selection: Selection;
   items: IFile[];
 

src/controls/filePicker/controls/TilesList/TilesList.tsx

@@ -52,7 +52,7 @@ export class TilesList extends React.Component<ITilesListProps> {
   }
 
   public componentDidUpdate(prevProps: ITilesListProps): void {
-    if (this.props.filePickerResult !== prevProps.filePickerResult) {
+    if (this.props.filePickerResults !== prevProps.filePickerResults) {
       this._listElem.forceUpdate();
     }
   }
@@ -163,7 +163,7 @@ export class TilesList extends React.Component<ITilesListProps> {
       this.props.onNextPageDataRequest();
       return null;
     }
-    const isSelected: boolean = this.props.filePickerResult && item.absoluteUrl === this.props.filePickerResult.fileAbsoluteUrl;
+    const isSelected: boolean = this.props.filePickerResults.filter(x => x.fileAbsoluteUrl === item.absoluteUrl).length > 0;
 
     // I know this is a lot of divs and spans inside of each other, but my
     // goal was to mimic the HTML and style of the out-of-the-box file picker