From de9da437f10ea228d01be3b1e39f2b30857ceeb6 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 24 Jun 2022 08:36:51 -0400
Subject: [PATCH] fix password autocomplete/correct/capitalize

---
 docs/resources/changelog.md   | 1 +
 src/components/input/input.ts | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 79290a26..07adcae9 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -17,6 +17,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where setting `valueAsDate` or `valueAsNumber` too early on `<sl-input>` would throw an error [#796](https://github.com/shoelace-style/shoelace/issues/796)
 - Fixed a bug in `<sl-color-picker>` where empty values weren't properly supported [#797](https://github.com/shoelace-style/shoelace/issues/797)
 - Fixed a bug in `<sl-color-picker>` where values were logged to the console when using the keyboard
+- Fixed a bug in `<sl-input>` where password controls would try to autocorrect/autocomplete/autocapitalize when the password is visible
 - Fixed label alignment in `<sl-checkbox>` and `<sl-radio>` so they align to the top of the control instead of the center when wrapping
 - Updated the `fieldset` attribute so it reflects in `<sl-radio-group>`
 
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 607976d7..520e287b 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -380,9 +380,9 @@ export default class SlInput extends LitElement {
               max=${ifDefined(this.max)}
               step=${ifDefined(this.step)}
               .value=${live(this.value)}
-              autocapitalize=${ifDefined(this.autocapitalize)}
-              autocomplete=${ifDefined(this.autocomplete)}
-              autocorrect=${ifDefined(this.autocorrect)}
+              autocapitalize=${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}
+              autocomplete=${ifDefined(this.type === 'password' ? 'off' : this.autocomplete)}
+              autocorrect=${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}
               ?autofocus=${this.autofocus}
               spellcheck=${ifDefined(this.spellcheck)}
               pattern=${ifDefined(this.pattern)}