From 14cdb082bc9bab27ad1fd6490ab3dc2a591fd97c Mon Sep 17 00:00:00 2001
From: hc-github-team-secure-vault-core
 <82990506+hc-github-team-secure-vault-core@users.noreply.github.com>
Date: Mon, 21 Aug 2023 13:10:15 -0400
Subject: [PATCH] backport of commit abd6324e50d6d785a4c51ea1a84c003b73aabdaf
 (#22465)

Co-authored-by: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
---
 changelog/22458.txt                                | 3 +++
 ui/lib/core/addon/components/form-field.hbs        | 3 ++-
 ui/tests/integration/components/form-field-test.js | 3 ++-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 changelog/22458.txt

diff --git a/changelog/22458.txt b/changelog/22458.txt
new file mode 100644
index 000000000..6ce092950
--- /dev/null
+++ b/changelog/22458.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fixes model defaults overwriting input value when user tries to clear form input
+```
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/form-field.hbs b/ui/lib/core/addon/components/form-field.hbs
index 3528e4d57..4f34d4d88 100644
--- a/ui/lib/core/addon/components/form-field.hbs
+++ b/ui/lib/core/addon/components/form-field.hbs
@@ -301,8 +301,9 @@
           disabled={{and @attr.options.editDisabled (not @model.isNew)}}
           autocomplete="off"
           spellcheck="false"
-          value={{or (get @model this.valuePath) @attr.options.defaultValue}}
+          value={{get @model this.valuePath}}
           {{on "change" this.onChangeWithEvent}}
+          {{on "input" this.onChangeWithEvent}}
           {{on "keyup" this.handleKeyUp}}
           class="input {{if this.validationError 'has-error-border'}}"
           maxLength={{@attr.options.characterLimit}}
diff --git a/ui/tests/integration/components/form-field-test.js b/ui/tests/integration/components/form-field-test.js
index 641889f4c..6209bcc0f 100644
--- a/ui/tests/integration/components/form-field-test.js
+++ b/ui/tests/integration/components/form-field-test.js
@@ -26,7 +26,8 @@ module('Integration | Component | form field', function (hooks) {
   };
 
   const setup = async function (attr) {
-    const model = EmberObject.create({});
+    // ember sets model attrs from the defaultValue key, mimicking that behavior here
+    const model = EmberObject.create({ [attr.name]: attr.options?.defaultValue });
     const spy = sinon.spy();
     this.set('onChange', spy);
     this.set('model', model);