[TextField] Use autocomplete="nope" instead of autocomplete="off"

[jineshshah36]

WHY are these changes introduced?

Some browsers (I'm looking at you Chrome) ignore autocomplete="off" because they think they know better. As a result, setting autocomplete="off" does not disable autocomplete. A better way to disable autocomplete is to use any string that does not match a valid autocomplete value such as "nope". See https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Disabling_autocompletion for more details.

WHAT is this pull request doing?

This will not make any UI changes

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[danrosenthal]

Thanks for the contribution @jineshshah36! This looks great. Just one change on the UNRELEASED.md and this should be good to go

[danrosenthal]

🎩 this PR on branch tophat-708 with this playground:

import * as React from 'react';
import {Page, TextField} from '@shopify/polaris';

interface State {
  value: string | undefined;
}

export default class Playground extends React.Component<{}, State> {
  state: State = {
    value: undefined,
  };

  render() {
    return (
      <Page
        title="Playground"
        primaryAction={{content: 'View Examples', url: '/examples'}}
      >
        <TextField
          label="Email"
          value={this.state.value}
          onChange={this.handleChange}
          autoComplete={false}
          type="email"
        />
      </Page>
    );
  }

  handleChange = (value: string) => {
    this.setState({value});
  };
}

[ghost]

🎉 Thanks for your contribution to Polaris React!

[mbaumbach]

@danrosenthal @jineshshah36 I'm actually seeing the reverse situation in Chrome 71. When autocomplete="nope" is used, I'm getting autocomplete results, but when it's set to autocomplete="off" I don't. It looks like Kent C. Dodd and the PayPal team had to pull a 180° on this as well (see: downshift-js/downshift#527 (comment))

I'm specifically testing this with the Autocomplete component and setting the Autocomplete.TextField to have autoComplete={false}.

[jineshshah36]

I'm also seeing this now. I'm thinking we should also revert this

[jakec-dev]

If you change it to autocomplete='__nope' then it works.