autoFill.tsx component is having autoComplete="off" hardcoded and because of this the chrome dropdown is shown.

[nishaant]

if we have a form and have a autofill input type component in it.
there is a bug in chrome which opens up the chrome autofill form.(https://stackoverflow.com/questions/25823448/ng-form-and-autocomplete-off/39689037#39689037)

Since in office-fabric the autofill.tsx is rendering a input field with autoComplete="off", and chrome is not respecting it for now.
as a workaround we can change the autocomplete value to some random string but fabric has hard coded the autocomplete = "off".

As a fix, we can make the autocomplete passed in inputprops, and apply it to inside autoFill.tsx.

[KevinTCoughlin]

Seems like a bug we should patch or at least make configurable! Let me take a look and get back to you.

[KevinTCoughlin]

An isolated approach to expose autoComplete to be overridden requires the following diff:

diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
index e82301656..e3fe6bab1 100644
--- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
@@ -114,6 +114,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
 
   public render(): JSX.Element {
     const { displayValue } = this.state;
+    const { autoComplete = 'off' } = this.props;
 
     const nativeProps = getNativeProps<React.InputHTMLAttributes<HTMLInputElement>>(this.props, inputProperties);
     return (
@@ -122,7 +123,7 @@ export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> impl
         ref={this._inputElement}
         value={displayValue}
         autoCapitalize={'off'}
-        autoComplete={'off'}
+        autoComplete={autoComplete}
         onCompositionStart={this._onCompositionStart}
         onCompositionEnd={this._onCompositionEnd}
         // TODO (Fabric 8?) - switch to calling only onChange. See notes in TextField._onInputChange.
diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
index 0b0e033bc..4b796407d 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
@@ -262,7 +262,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
               {this.canAddItems() && (
                 <Autofill
                   spellCheck={false}
-                  {...inputProps as any}
+                  {...(inputProps as any)}
                   className={classNames.input}
                   componentRef={this.input}
                   onClick={this.onClick}
@@ -275,7 +275,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
                   aria-haspopup="true"
                   aria-describedby={items.length > 0 ? this._ariaMap.selectedItems : undefined}
                   autoCapitalize="off"
-                  autoComplete="off"
+                  autoComplete={this.props.inputProps && this.props.inputProps.autoComplete ? this.props.inputProps.autoComplete : 'off'}
                   role={'combobox'}
                   disabled={disabled}
                   aria-controls={`${suggestionsAvailable} ${selectedSuggestionAlertId}` || undefined}
@@ -960,7 +960,7 @@ export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BaseP
           {this.getSuggestionsAlert(classNames.screenReaderText)}
           <div className={classNames.text}>
             <Autofill
-              {...inputProps as any}
+              {...(inputProps as any)}
               className={classNames.input}
               componentRef={this.input}
               onFocus={this.onInputFocus}
@@ -972,7 +972,7 @@ export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BaseP
               aria-expanded={!!this.state.suggestionsVisible}
               aria-haspopup="true"
               autoCapitalize="off"
-              autoComplete="off"
+              autoComplete={this.props.inputProps && this.props.inputProps.autoComplete ? this.props.inputProps.autoComplete : 'off'}
               role="combobox"
               disabled={disabled}
               aria-controls={`${suggestionsAvailable} ${selectedSuggestionAlertId}` || undefined}
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx
index 429d76380..7b6c7a752 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx
@@ -159,8 +159,9 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
         removeButtonAriaLabel={'Remove'}
         inputProps={{
           onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),
-          onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),
-          'aria-label': 'People Picker'
+          onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('FOO called'),
+          'aria-label': 'People Picker',
+          autoComplete: 'Foo'
         }}
         componentRef={this._picker}
         onInputChange={this._onInputChange}

@joschect, thoughts on exposing the above autoComplete prop to be configurable before I raise a PR?

[joschect]

@nishaant Per the stack overflow, it looks like the newer versions of chrome respect autocomplete=off. I'm guessing that this was a browser bug. Does this still repro?

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!