[TextField] Disable pointer-events on prefix and suffix elements

[whizkydee]

WHAT is this pull request doing?

Disables pointing device interaction on the prefix and suffix elements of the TextField component. This enables it behave like a label that sends focus to its respective input element, effectively making it easier to interact with the text field itself.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page, TextField} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <TextField suffix=".myshopify.com" label="Subdomain" />
    </Page>
  );
}

Before	After
Screen.Recording.2021-05-17.at.9.56.18.AM.mov	Screen.Recording.2021-05-17.at.9.57.00.AM.mov

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[alex-page]

Thanks @whizkydee!

[lukashlavacka]

This change broke the behaviour of <Tooltip> components used as prefix/suffix. Cause of #4256

[whizkydee]

Ah, interesting. Didn’t realize it was being used for interactive elements. I guess this enhancement is probably very specific to the most common use case. We can revert this then.