diff --git a/changelog/unreleased/bugfix-remove-input-password-buttons-when-disabled b/changelog/unreleased/bugfix-remove-input-password-buttons-when-disabled new file mode 100644 index 00000000000..a7906aa8ca1 --- /dev/null +++ b/changelog/unreleased/bugfix-remove-input-password-buttons-when-disabled @@ -0,0 +1,6 @@ +Bugfix: Remove password buttons on input if disabled + +We've removed the password buttons on an input field which is disabled to not confuse the user. + +https://github.com/owncloud/web/pull/10096 +https://github.com/owncloud/web/issues/10084 diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts index a1af8396070..b87967adaa6 100644 --- a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts +++ b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts @@ -88,6 +88,10 @@ describe('OcTextInput', () => { const wrapper2 = getMountedWrapper({ props: { type: 'password' } }) expect(wrapper2.find(selectors.copyPasswordBtn).exists()).toBeFalsy() }) + it('should not exist if the input is disabled', () => { + const wrapper = getMountedWrapper({ props: { type: 'password', disabled: true } }) + expect(wrapper.find(selectors.copyPasswordBtn).exists()).toBeFalsy() + }) it('should exist if type is "password" and value entered', async () => { const wrapper = getMountedWrapper({ props: { type: 'password' } }) await wrapper.find(selectors.inputField).setValue('password') @@ -108,6 +112,10 @@ describe('OcTextInput', () => { const wrapper2 = getMountedWrapper({ props: { type: 'password' } }) expect(wrapper2.find(selectors.showPasswordToggleBtn).exists()).toBeFalsy() }) + it('should not exist if the input is disabled', () => { + const wrapper = getMountedWrapper({ props: { type: 'password', disabled: true } }) + expect(wrapper.find(selectors.showPasswordToggleBtn).exists()).toBeFalsy() + }) it('should exist if type is "password" and value entered', async () => { const wrapper = getMountedWrapper({ props: { type: 'password' } }) await wrapper.find(selectors.inputField).setValue('password') @@ -130,6 +138,10 @@ describe('OcTextInput', () => { const wrapper2 = getMountedWrapper({ props: { type: 'password' } }) expect(wrapper2.find(selectors.generatePasswordBtn).exists()).toBeFalsy() }) + it('should not exist if the input is disabled', () => { + const wrapper = getMountedWrapper({ props: { type: 'password', disabled: true } }) + expect(wrapper.find(selectors.generatePasswordBtn).exists()).toBeFalsy() + }) it('should exist if type is "password" and prop "generatePasswordMethod" is provided', () => { const wrapper = getMountedWrapper({ props: { generatePasswordMethod: jest.fn(), type: 'password' } diff --git a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap index 74a0684260c..b0e22082022 100644 --- a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap +++ b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap @@ -2,11 +2,11 @@ exports[`OcTextInput password input field password policy displays error state if password does not match criteria 1`] = `
- +
- +