Update ExtendedPeoplePicker component to set the spellCheck and autoC…

common/changes/office-ui-fabric-react/extended-people-picker-patch_2018-11-27-09-15.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Modify the ExtendedPeoplePicker so that the input props, spellcheck and autocorrect, are always set to false and off, respectively.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "adameury@outlook.com"
+}

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts

@@ -180,6 +180,8 @@ class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extends BaseC
   // (undocumented)
   readonly inputElement: HTMLInputElement | null;
   // (undocumented)
+  protected inputProps: () => IInputProps;
+  // (undocumented)
   readonly items: any;
   // (undocumented)
   protected onBackspace: (ev: React.KeyboardEvent<HTMLElement>) => void;
@@ -1149,6 +1151,8 @@ enum ExpandingCardMode {
 
 // @public (undocumented)
 class ExtendedPeoplePicker extends BaseExtendedPeoplePicker {
+  // (undocumented)
+  protected inputProps: () => IInputProps;
 }
 
 // @public (undocumented)

packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx

@@ -95,7 +95,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   public render(): JSX.Element {
-    const { className, inputProps, disabled, focusZoneProps } = this.props;
+    const { className, disabled, focusZoneProps } = this.props;
     const activeDescendant =
       this.floatingPicker.current && this.floatingPicker.current.currentSelectedSuggestionIndex !== -1
         ? 'sug-' + this.floatingPicker.current.currentSelectedSuggestionIndex
@@ -115,7 +115,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
               {this.renderSelectedItemsList()}
               {this.canAddItems() && (
                 <Autofill
-                  {...inputProps as IInputProps}
+                  {...this.inputProps()}
                   className={css('ms-BasePicker-input', styles.pickerInput)}
                   ref={this.input}
                   onFocus={this.onInputFocus}
@@ -172,6 +172,10 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     });
   }
 
+  protected inputProps = (): IInputProps => {
+    return this.props.inputProps as IInputProps;
+  };
+
   protected onInputChange = (value: string): void => {
     this.setState({ queryString: value });
     if (this.floatingPicker.current) {

packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.test.tsx

@@ -0,0 +1,111 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+import * as renderer from 'react-test-renderer';
+
+import { Autofill } from '../../Autofill/index';
+import { IPersonaProps } from '../../Persona/index';
+import { people } from '../examples/PeopleExampleData';
+import { ExtendedPeoplePicker } from './ExtendedPeoplePicker';
+import { SuggestionsStore, FloatingPeoplePicker, IBaseFloatingPickerProps } from '../../FloatingPicker/index';
+import { ISelectedItemProps, IBaseSelectedItemsListProps, IExtendedPersonaProps, SelectedPeopleList } from '../../SelectedItemsList/index';
+
+function onResolveSuggestions(text: string): IPersonaProps[] {
+  const peopleList: IPersonaProps[] = people;
+  return peopleList.filter(p => p.text && p.text.includes(text));
+}
+
+const floatingPickerProps = {
+  onResolveSuggestions: onResolveSuggestions,
+  suggestionsStore: new SuggestionsStore<IPersonaProps>()
+};
+
+const basicItemRenderer = (props: ISelectedItemProps<IPersonaProps>) => {
+  return <div>{props.item.text}</div>;
+};
+
+const selectedItemsListProps: IBaseSelectedItemsListProps<IPersonaProps> = {
+  onRenderItem: basicItemRenderer
+};
+
+const onRenderFloatingPicker = (props: IBaseFloatingPickerProps<IPersonaProps>): JSX.Element => {
+  return <FloatingPeoplePicker {...props} />;
+};
+
+const onRenderSelectedItems = (props: IBaseSelectedItemsListProps<IExtendedPersonaProps>): JSX.Element => {
+  return <SelectedPeopleList {...props} />;
+};
+
+describe('Pickers', () => {
+  describe('ExtendedPeoplePicker', () => {
+    it('sets the Autofill spellCheck is set to false', () => {
+      const root = document.createElement('div');
+      document.body.appendChild(root);
+
+      const pickerRenderer = renderer.create(
+        <ExtendedPeoplePicker
+          floatingPickerProps={floatingPickerProps}
+          selectedItemsListProps={selectedItemsListProps}
+          onRenderFloatingPicker={onRenderFloatingPicker}
+          onRenderSelectedItems={onRenderSelectedItems}
+        />
+      );
+      const pickerInstance = pickerRenderer.root;
+
+      expect(pickerInstance.findByType(Autofill).props.spellCheck).toBe(false);
+    });
+
+    it('sets the Autofill autoCorrect prop to off', () => {
+      const root = document.createElement('div');
+      document.body.appendChild(root);
+
+      const pickerRenderer = renderer.create(
+        <ExtendedPeoplePicker
+          floatingPickerProps={floatingPickerProps}
+          selectedItemsListProps={selectedItemsListProps}
+          onRenderFloatingPicker={onRenderFloatingPicker}
+          onRenderSelectedItems={onRenderSelectedItems}
+        />
+      );
+      const pickerInstance = pickerRenderer.root;
+
+      expect(pickerInstance.findByType(Autofill).props.autoCorrect).toBe('off');
+    });
+
+    it('overwrites spellCheck', () => {
+      const root = document.createElement('div');
+      document.body.appendChild(root);
+
+      const pickerRenderer = renderer.create(
+        <ExtendedPeoplePicker
+          floatingPickerProps={floatingPickerProps}
+          selectedItemsListProps={selectedItemsListProps}
+          onRenderFloatingPicker={onRenderFloatingPicker}
+          onRenderSelectedItems={onRenderSelectedItems}
+          inputProps={{ spellCheck: true }}
+        />
+      );
+      const pickerInstance = pickerRenderer.root;
+
+      expect(pickerInstance.findByType(Autofill).props.spellCheck).toBe(false);
+    });
+
+    it('overwrites autoCorrect', () => {
+      const root = document.createElement('div');
+      document.body.appendChild(root);
+
+      const pickerRenderer = renderer.create(
+        <ExtendedPeoplePicker
+          floatingPickerProps={floatingPickerProps}
+          selectedItemsListProps={selectedItemsListProps}
+          onRenderFloatingPicker={onRenderFloatingPicker}
+          onRenderSelectedItems={onRenderSelectedItems}
+          inputProps={{ autoCorrect: 'on' }}
+        />
+      );
+      const pickerInstance = pickerRenderer.root;
+
+      expect(pickerInstance.findByType(Autofill).props.autoCorrect).toBe('off');
+    });
+  });
+});

packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx

@@ -1,17 +1,26 @@
 /* tslint:disable */
-import { IPickerItemProps } from '../../../Pickers';
+import { IPickerItemProps, IInputProps } from '../../../Pickers';
 /* tslint:enable */
 
 import { IExtendedPersonaProps } from '../../../SelectedItemsList';
 import { IPersonaProps } from '../../../Persona';
 import './ExtendedPeoplePicker.scss';
 import { BaseExtendedPicker } from '../BaseExtendedPicker';
 import { IBaseExtendedPickerProps } from '../BaseExtendedPicker.types';
+import { assign } from '@uifabric/utilities';
 
 export interface IPeoplePickerItemProps extends IPickerItemProps<IExtendedPersonaProps> {}
 
 export interface IExtendedPeoplePickerProps extends IBaseExtendedPickerProps<IPersonaProps> {}
 
 export class BaseExtendedPeoplePicker extends BaseExtendedPicker<IPersonaProps, IExtendedPeoplePickerProps> {}
 
-export class ExtendedPeoplePicker extends BaseExtendedPeoplePicker {}
+export class ExtendedPeoplePicker extends BaseExtendedPeoplePicker {
+  protected inputProps = (): IInputProps => {
+    const overwrittenInputProps: IInputProps = {
+      autoCorrect: 'off',
+      spellCheck: false
+    };
+    return assign({}, this.props.inputProps, overwrittenInputProps);
+  };
+}

packages/office-ui-fabric-react/src/components/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot

@@ -55,6 +55,7 @@ exports[`Component Examples renders ExtendedPeoplePicker.Basic.Example.tsx corre
             onKeyDown={[Function]}
             onPaste={[Function]}
             role="combobox"
+            spellCheck={false}
             value=""
           />
         </div>