[TextField] Allow TextField to disable 1Password integration

.changeset/brave-dancers-appear.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for disabling 1Password integration in `TextField`

polaris-react/src/components/Tabs/components/CreateViewModal/CreateViewModal.tsx

@@ -111,6 +111,7 @@ export function CreateViewModal({
                       )
                     : undefined
                 }
+                disable1Password
               />
             </div>
           </FormLayout>

polaris-react/src/components/TextField/TextField.stories.tsx

@@ -866,3 +866,19 @@ export function WithFormSubmit() {
     </VerticalStack>
   );
 }
+
+export function With1PasswordDisabled() {
+  const [value, setValue] = useState('Jaded Pixel');
+
+  const handleChange = useCallback((newValue) => setValue(newValue), []);
+
+  return (
+    <TextField
+      label="Store name"
+      value={value}
+      onChange={handleChange}
+      autoComplete="off"
+      disable1Password
+    />
+  );
+}

polaris-react/src/components/TextField/TextField.tsx

@@ -173,6 +173,8 @@ interface NonMutuallyExclusiveProps {
   onBlur?(event?: React.FocusEvent): void;
   /** Removes the border around the input. Used in the IndexFilters component. */
   borderless?: boolean;
+  /** Disables the 1password extension on the text field */
+  disable1Password?: boolean;
 }
 
 export type MutuallyExclusiveSelectionProps =
@@ -239,6 +241,7 @@ export function TextField({
   onFocus,
   onBlur,
   borderless,
+  disable1Password,
 }: TextFieldProps) {
   const i18n = useI18n();
   const [height, setHeight] = useState<number | null>(null);
@@ -556,6 +559,7 @@ export function TextField({
     onKeyDown: handleKeyDown,
     onChange: !suggestion ? handleChange : undefined,
     onInput: suggestion ? handleChange : undefined,
+    'data-1p-ignore': disable1Password || undefined,
   });
 
   const inputWithVerticalContentMarkup = verticalContent ? (

polaris-react/src/components/TextField/tests/TextField.test.tsx

@@ -85,6 +85,21 @@ describe('<TextField />', () => {
     });
   });
 
+  it('adds the data-1p-ignore prop if disable1Password is set', () => {
+    const textField = mountWithApp(
+      <TextField
+        label="TextField"
+        onChange={noop}
+        autoComplete="off"
+        disable1Password
+      />,
+    );
+
+    expect(textField).toContainReactComponent('input', {
+      'data-1p-ignore': true,
+    } as any);
+  });
+
   describe('click events', () => {
     it('bubbles up to the parent element when it occurs in the input', () => {
       const onClick = jest.fn();