ListItemPicker add property to show all options by default

Author: joelfmrodrigues

docs/documentation/docs/controls/ListItemPicker.md

@@ -65,5 +65,6 @@ The `ListItemPicker` control can be configured with the following properties:
 | placeholder | string | no | Short text hint to display in empty picker |
 | substringSearch | boolean | no | Specifies if substring search should be used |
 | label | string | no | Specifies the text describing the ListItemPicker. |
+| enableDefaultSuggestions | boolean | no | Enable default suggestions. All options are displayed by default when clicking on the control. |
 
 ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ListItemPicker)

src/controls/listItemPicker/IListItemPickerProps.ts

@@ -28,4 +28,9 @@ export interface IListItemPickerProps {
    */
    label?: string;
 
+   /**
+    * Enable default suggestions. All options are displayed by default when clicking on the control
+    */
+   enableDefaultSuggestions?: boolean;
+
 }

src/controls/listItemPicker/ListItemPicker.tsx

@@ -7,6 +7,7 @@ import { getId } from 'office-ui-fabric-react/lib/Utilities';
 import { IListItemPickerProps, IListItemPickerState } from ".";
 import * as telemetry from '../../common/telemetry';
 import isEqual from 'lodash/isEqual';
+import { ITag } from 'office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker.types';
 
 
 export class ListItemPicker extends React.Component<IListItemPickerProps, IListItemPickerState> {
@@ -74,6 +75,11 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
         }
         <div id={this._tagPickerId}>
           <TagPicker onResolveSuggestions={this.onFilterChanged}
+            onEmptyResolveSuggestions={(selectLists) => {
+              if (this.props.enableDefaultSuggestions) {
+                return this.onFilterChanged("", selectLists);
+              }
+            }}
             //   getTextFromItem={(item: any) => { return item.name; }}
             getTextFromItem={this.getTextFromItem}
             pickerSuggestionsProps={{
@@ -115,8 +121,8 @@ export class ListItemPicker extends React.Component<IListItemPickerProps, IListI
   /**
    * Filter Change
    */
-  private onFilterChanged = async (filterText: string, tagList: { key: string; name: string }[]) => {
-    let resolvedSugestions: { key: string; name: string }[] = await this.loadListItems(filterText);
+  private onFilterChanged = async (filterText: string, tagList: ITag[]) => {
+    let resolvedSugestions: ITag[] = await this.loadListItems(filterText);
 
     const {
       selectedItems

src/services/SPService.ts

@@ -114,8 +114,8 @@ export default class SPService implements ISPService {
     }
     else {
       const filterStr = substringSearch ? // JJ - 20200613 - find by substring as an option
-        `substringof('${encodeURIComponent(filterText.replace("'", "''"))}',${internalColumnName})${filterString ? ' and ' + filterString : ''}`
-        : `startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'", "''"))}')${filterString ? ' and ' + filterString : ''}`; //string = filterList  ? `and ${filterList}` : '';
+        `${filterText ? `substringof('${encodeURIComponent(filterText.replace("'", "''"))}',${internalColumnName})` : ''}${filterString ? (filterText ? ' and ' : '') + filterString : ''}`
+        : `${filterText ? `startswith(${internalColumnName},'${encodeURIComponent(filterText.replace("'", "''"))}')` : ''}${filterString ? (filterText ? ' and ' : '') + filterString : ''}`; //string = filterList  ? `and ${filterList}` : '';
       apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterStr}&$orderby=${orderBy}`;
     }