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();