diff --git a/.changeset/brave-dancers-appear.md b/.changeset/brave-dancers-appear.md
new file mode 100644
index 00000000000..0f70aef6678
--- /dev/null
+++ b/.changeset/brave-dancers-appear.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for disabling 1Password integration in `TextField`
diff --git a/polaris-react/src/components/Tabs/components/CreateViewModal/CreateViewModal.tsx b/polaris-react/src/components/Tabs/components/CreateViewModal/CreateViewModal.tsx
index 6796e4e69e9..881d54f9299 100644
--- a/polaris-react/src/components/Tabs/components/CreateViewModal/CreateViewModal.tsx
+++ b/polaris-react/src/components/Tabs/components/CreateViewModal/CreateViewModal.tsx
@@ -111,6 +111,7 @@ export function CreateViewModal({
)
: undefined
}
+ disable1Password
/>
diff --git a/polaris-react/src/components/TextField/TextField.stories.tsx b/polaris-react/src/components/TextField/TextField.stories.tsx
index ce3972e5845..cc3b731266e 100644
--- a/polaris-react/src/components/TextField/TextField.stories.tsx
+++ b/polaris-react/src/components/TextField/TextField.stories.tsx
@@ -866,3 +866,19 @@ export function WithFormSubmit() {
);
}
+
+export function With1PasswordDisabled() {
+ const [value, setValue] = useState('Jaded Pixel');
+
+ const handleChange = useCallback((newValue) => setValue(newValue), []);
+
+ return (
+
+ );
+}
diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx
index 3de0a291139..c4ce8ca5574 100644
--- a/polaris-react/src/components/TextField/TextField.tsx
+++ b/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(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 ? (
diff --git a/polaris-react/src/components/TextField/tests/TextField.test.tsx b/polaris-react/src/components/TextField/tests/TextField.test.tsx
index 668a0b39f0f..32437f850b3 100644
--- a/polaris-react/src/components/TextField/tests/TextField.test.tsx
+++ b/polaris-react/src/components/TextField/tests/TextField.test.tsx
@@ -85,6 +85,21 @@ describe('', () => {
});
});
+ it('adds the data-1p-ignore prop if disable1Password is set', () => {
+ const textField = mountWithApp(
+ ,
+ );
+
+ 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();