From 015381f9b58cb7f2b4320cb732f43d2314f113c6 Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Thu, 11 Jan 2018 18:55:17 -0800 Subject: [PATCH 01/10] enable the base auto fill to work with composed languages like Japanese. Also made some small improvements to structure --- .../pickers/AutoFill/BaseAutoFill.tsx | 81 +++++++++++++++---- 1 file changed, 66 insertions(+), 15 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx index 0448b991c61f9..44ce8dce23bf8 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx @@ -5,7 +5,8 @@ import { KeyCodes, autobind, getNativeProps, - inputProperties + inputProperties, + Async } from '../../../Utilities'; export interface IBaseAutoFillState { @@ -73,9 +74,7 @@ export class BaseAutoFill extends BaseComponent) { + this._autoFillEnabled = false; + } + + @autobind + private _onCompositionEnd(ev: React.CompositionEvent) { + let inputValue = this._getCurrentInputValue(); + this._tryEnableAutoFill(inputValue, this.value, true); + // Due to timing, this needs to be async, otherwise no text will be selected. + this._async.setTimeout(() => this._updateValue(inputValue), 0); + } + @autobind private _onClick() { if (this._value && this._value !== '' && this._autoFillEnabled) { @@ -160,11 +176,13 @@ export class BaseAutoFill extends BaseComponent) { - let value: string = (ev.target as HTMLInputElement).value; - if (value && (ev.target as HTMLInputElement).selectionStart === value.length && !this._autoFillEnabled && value.length > this._value.length) { + let value: string = this._getCurrentInputValue(); + this._tryEnableAutoFill(value, this._value); + this._updateValue(value); + } + + private _getCurrentInputValue() { + let value: string = this._inputElement.value; + return value; + } + + /** + * Attempts to enable autofill. Whether or not autofill is enabled depends on the input value, + * whether or not any text is selected, and only if the new input value is longer than the old input value. + * @param newValue + */ + private _tryEnableAutoFill(newValue: string, oldValue: string, isComposed?: boolean) { + if (newValue + && this._inputElement.selectionStart === newValue.length + && !this._autoFillEnabled + && (newValue.length > oldValue.length || isComposed)) { this._autoFillEnabled = true; } - this._updateValue(value); } private _notifyInputChange(newValue: string) { @@ -193,20 +228,36 @@ export class BaseAutoFill extends BaseComponent this._notifyInputChange(this._value)); } + /** + * Returns a string that should be used as the display value. + * It evaluates this based on whether or not the suggested value starts with the input value + * and whether or not autofill is enabled. + * @param inputValue the value that the input currently has. + * @param suggestedDisplayValue the possible full value + */ + private _getDisplayValue(inputValue: string, suggestedDisplayValue?: string) { + let displayValue = inputValue; + if (suggestedDisplayValue + && inputValue + && this._doesTextStartWith(suggestedDisplayValue, displayValue) + && this._autoFillEnabled) { + displayValue = suggestedDisplayValue; + } + return displayValue; + } + private _doesTextStartWith(text: string, startWith: string) { if (!text || !startWith) { return false; From 7b61a28a928439960198e720c8f9161d1d8cffc5 Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Thu, 11 Jan 2018 18:56:21 -0800 Subject: [PATCH 02/10] adding change file --- .../baseautofill-fixime-input_2018-01-12-02-56.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/baseautofill-fixime-input_2018-01-12-02-56.json diff --git a/common/changes/office-ui-fabric-react/baseautofill-fixime-input_2018-01-12-02-56.json b/common/changes/office-ui-fabric-react/baseautofill-fixime-input_2018-01-12-02-56.json new file mode 100644 index 0000000000000..33b5d94c697d8 --- /dev/null +++ b/common/changes/office-ui-fabric-react/baseautofill-fixime-input_2018-01-12-02-56.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "BaseAutoFill: Fixed a bug where baseautofill would not work with composed languages like Japanese", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "joschect@microsoft.com" +} \ No newline at end of file From 621ea0d8a82153e5929b18383117c2b0e212cd54 Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Thu, 11 Jan 2018 18:58:01 -0800 Subject: [PATCH 03/10] removing unecessary import --- .../src/components/pickers/AutoFill/BaseAutoFill.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx index 44ce8dce23bf8..c5d19d019646d 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx @@ -5,8 +5,7 @@ import { KeyCodes, autobind, getNativeProps, - inputProperties, - Async + inputProperties } from '../../../Utilities'; export interface IBaseAutoFillState { From 24c6417717f29881b7e1e8433aa934105949f588 Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Fri, 12 Jan 2018 10:48:40 -0800 Subject: [PATCH 04/10] fix lint --- .../src/components/pickers/AutoFill/BaseAutoFill.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx index c5d19d019646d..e1a564855d8cd 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx @@ -141,8 +141,6 @@ export class BaseAutoFill extends BaseComponent) { this._autoFillEnabled = false; From 786e0f88126175dce9c54344f71e28d511d11847 Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Tue, 16 Jan 2018 11:08:33 -0800 Subject: [PATCH 05/10] Update BasePicker Snap --- .../components/pickers/__snapshots__/BasePicker.test.tsx.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap index 2cf3f9d99d088..102afafed7c9f 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap @@ -54,6 +54,8 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = ` disabled={undefined} onChange={[Function]} onClick={[Function]} + onCompositionEnd={[Function]} + onCompositionStart={[Function]} onFocus={[Function]} onKeyDown={[Function]} role="combobox" @@ -119,6 +121,8 @@ exports[`Pickers TagPicker renders TagPicker correctly 1`] = ` disabled={undefined} onChange={[Function]} onClick={[Function]} + onCompositionEnd={[Function]} + onCompositionStart={[Function]} onFocus={[Function]} onKeyDown={[Function]} role="combobox" From 799d7e38d5220732327944899508d5afabd1afce Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Tue, 16 Jan 2018 14:30:07 -0800 Subject: [PATCH 06/10] Fixing comments and minor bug in firefox --- .../pickers/AutoFill/BaseAutoFill.tsx | 62 +++++++++++-------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx index e1a564855d8cd..46660f5408c6a 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx @@ -149,7 +149,7 @@ export class BaseAutoFill extends BaseComponent) { let inputValue = this._getCurrentInputValue(); - this._tryEnableAutoFill(inputValue, this.value, true); + this._tryEnableAutoFill(inputValue, this.value, false, true); // Due to timing, this needs to be async, otherwise no text will be selected. this._async.setTimeout(() => this._updateValue(inputValue), 0); } @@ -167,36 +167,41 @@ export class BaseAutoFill extends BaseComponent) { let value: string = this._getCurrentInputValue(); - this._tryEnableAutoFill(value, this._value); + // Right now typing does not have isComposing, once that has been fixed any should be removed. + this._tryEnableAutoFill(value, this._value, (ev.nativeEvent as any).isComposing); this._updateValue(value); } @@ -208,10 +213,17 @@ export class BaseAutoFill extends BaseComponent oldValue.length || isComposed)) { From 36c14f2f24fcc9f8585785e84178cb3af2146420 Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Wed, 17 Jan 2018 12:22:19 -0800 Subject: [PATCH 07/10] Make onchange better and update snaps --- .../ComboBox/__snapshots__/ComboBox.test.tsx.snap | 2 ++ .../src/components/pickers/AutoFill/BaseAutoFill.tsx | 7 +++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap index ce96a7f090f96..fe2400f139829 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap @@ -106,6 +106,8 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` onBlur={[Function]} onChange={[Function]} onClick={[Function]} + onCompositionEnd={[Function]} + onCompositionStart={[Function]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx index 46660f5408c6a..fba3e6ce57c35 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx @@ -199,13 +199,16 @@ export class BaseAutoFill extends BaseComponent) { - let value: string = this._getCurrentInputValue(); + let value: string = this._getCurrentInputValue(ev); // Right now typing does not have isComposing, once that has been fixed any should be removed. this._tryEnableAutoFill(value, this._value, (ev.nativeEvent as any).isComposing); this._updateValue(value); } - private _getCurrentInputValue() { + private _getCurrentInputValue(ev?: React.FormEvent) { + if (ev && ev.target && (ev.target as any).value) { + return (ev.target as any).value; + } let value: string = this._inputElement.value; return value; } From 0cdb6a6522eb4b64b9c6764f36700880ffbb20b7 Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Fri, 19 Jan 2018 14:41:06 -0800 Subject: [PATCH 08/10] adding in comments --- .../src/components/pickers/AutoFill/BaseAutoFill.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx index fba3e6ce57c35..a4cd7b0eb352e 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx @@ -141,11 +141,17 @@ export class BaseAutoFill extends BaseComponent) { this._autoFillEnabled = false; } + // Composition events are used when the character/text requires several keystrokes to be completed. + // Some examples of this are mobile text input and langauges like Japanese or Arabic. + // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart @autobind private _onCompositionEnd(ev: React.CompositionEvent) { let inputValue = this._getCurrentInputValue(); From bf790e99c5d54876bebb3aa713043c00d66f386f Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Mon, 22 Jan 2018 11:18:31 -0800 Subject: [PATCH 09/10] fixing comments --- .../pickers/AutoFill/BaseAutoFill.tsx | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx index a4cd7b0eb352e..67234413fadf0 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx @@ -155,7 +155,7 @@ export class BaseAutoFill extends BaseComponent) { let inputValue = this._getCurrentInputValue(); - this._tryEnableAutoFill(inputValue, this.value, false, true); + this._tryEnableAutofill(inputValue, this.value, false, true); // Due to timing, this needs to be async, otherwise no text will be selected. this._async.setTimeout(() => this._updateValue(inputValue), 0); } @@ -181,11 +181,6 @@ export class BaseAutoFill extends BaseComponent) { let value: string = this._getCurrentInputValue(ev); // Right now typing does not have isComposing, once that has been fixed any should be removed. - this._tryEnableAutoFill(value, this._value, (ev.nativeEvent as any).isComposing); + this._tryEnableAutofill(value, this._value, (ev.nativeEvent as any).isComposing); this._updateValue(value); } @@ -222,15 +217,15 @@ export class BaseAutoFill extends BaseComponent Date: Mon, 22 Jan 2018 14:16:28 -0800 Subject: [PATCH 10/10] small code cleanup --- .../src/components/pickers/AutoFill/BaseAutoFill.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx index 67234413fadf0..72e5b83f51a1e 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx @@ -206,12 +206,12 @@ export class BaseAutoFill extends BaseComponent) { + private _getCurrentInputValue(ev?: React.FormEvent): string { if (ev && ev.target && (ev.target as any).value) { return (ev.target as any).value; + } else { + return this._inputElement.value; } - let value: string = this._inputElement.value; - return value; } /**