From 2c4b53b63edfed5c6168ec14830812dd9b5046c5 Mon Sep 17 00:00:00 2001 From: Adam Eury Date: Tue, 27 Nov 2018 01:51:55 -0500 Subject: [PATCH 1/3] Update ExtendedPeoplePicker component to set the spellCheck and autoCorrect input props to false and off, respectively. --- .../etc/office-ui-fabric-react.api.ts | 4 + .../ExtendedPicker/BaseExtendedPicker.tsx | 8 +- .../ExtendedPeoplePicker.test.tsx | 111 ++++++++++++++++++ .../PeoplePicker/ExtendedPeoplePicker.tsx | 13 +- ...xtendedPeoplePicker.Basic.Example.tsx.shot | 1 + 5 files changed, 133 insertions(+), 4 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.test.tsx diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts index 3c85cc74b21d67..df3a8f512275dd 100644 --- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts +++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts @@ -180,6 +180,8 @@ class BaseExtendedPicker> extends BaseC // (undocumented) readonly inputElement: HTMLInputElement | null; // (undocumented) + protected inputProps: () => IInputProps; + // (undocumented) readonly items: any; // (undocumented) protected onBackspace: (ev: React.KeyboardEvent) => void; @@ -1149,6 +1151,8 @@ enum ExpandingCardMode { // @public (undocumented) class ExtendedPeoplePicker extends BaseExtendedPeoplePicker { + // (undocumented) + protected inputProps: () => IInputProps; } // @public (undocumented) diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx index fe0947d2722783..52e7fe2544d8da 100644 --- a/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -95,7 +95,7 @@ export class BaseExtendedPicker> 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> extend {this.renderSelectedItemsList()} {this.canAddItems() && ( > extend }); } + protected inputProps = (): IInputProps => { + return this.props.inputProps as IInputProps; + }; + protected onInputChange = (value: string): void => { this.setState({ queryString: value }); if (this.floatingPicker.current) { diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.test.tsx b/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.test.tsx new file mode 100644 index 00000000000000..c00b0a61349d8a --- /dev/null +++ b/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() +}; + +const basicItemRenderer = (props: ISelectedItemProps) => { + return
{props.item.text}
; +}; + +const selectedItemsListProps: IBaseSelectedItemsListProps = { + onRenderItem: basicItemRenderer +}; + +const onRenderFloatingPicker = (props: IBaseFloatingPickerProps): JSX.Element => { + return ; +}; + +const onRenderSelectedItems = (props: IBaseSelectedItemsListProps): JSX.Element => { + return ; +}; + +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( + + ); + 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( + + ); + 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( + + ); + 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( + + ); + const pickerInstance = pickerRenderer.root; + + expect(pickerInstance.findByType(Autofill).props.autoCorrect).toBe('off'); + }); + }); +}); diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx b/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx index 7151587d3799a3..984aa0aeb87ac8 100644 --- a/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx @@ -1,5 +1,6 @@ /* tslint:disable */ -import { IPickerItemProps } from '../../../Pickers'; +import { assign } from 'office-ui-fabric-react/lib/Utilities'; +import { IPickerItemProps, IInputProps } from '../../../Pickers'; /* tslint:enable */ import { IExtendedPersonaProps } from '../../../SelectedItemsList'; @@ -14,4 +15,12 @@ export interface IExtendedPeoplePickerProps extends IBaseExtendedPickerProps {} -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); + }; +} diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot index aa47ecd506f30a..5c6ce759f944f2 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/ExtendedPeoplePicker.Basic.Example.tsx.shot +++ b/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="" /> From 6faacb3c94101beb59e6c233c96b073c5ff9c6e4 Mon Sep 17 00:00:00 2001 From: Adam Eury Date: Tue, 27 Nov 2018 04:00:55 -0500 Subject: [PATCH 2/3] update import for assign --- .../ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx b/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx index 984aa0aeb87ac8..340001428b0174 100644 --- a/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx @@ -1,5 +1,4 @@ /* tslint:disable */ -import { assign } from 'office-ui-fabric-react/lib/Utilities'; import { IPickerItemProps, IInputProps } from '../../../Pickers'; /* tslint:enable */ @@ -8,6 +7,7 @@ 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 {} From cc20f40755f43a8642cb0e3045f00205e669b347 Mon Sep 17 00:00:00 2001 From: Adam Eury Date: Tue, 27 Nov 2018 04:16:49 -0500 Subject: [PATCH 3/3] Add a change file. --- ...extended-people-picker-patch_2018-11-27-09-15.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/extended-people-picker-patch_2018-11-27-09-15.json diff --git a/common/changes/office-ui-fabric-react/extended-people-picker-patch_2018-11-27-09-15.json b/common/changes/office-ui-fabric-react/extended-people-picker-patch_2018-11-27-09-15.json new file mode 100644 index 00000000000000..6dba1c1fc63acb --- /dev/null +++ b/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" +} \ No newline at end of file