From abd6324e50d6d785a4c51ea1a84c003b73aabdaf Mon Sep 17 00:00:00 2001
From: claire bontempo <68122737+hellobontempo@users.noreply.github.com>
Date: Sun, 20 Aug 2023 10:55:41 -0700
Subject: [PATCH] UI: fix default values resetting form inputs (#22458)

---
 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 0000000000..6ce0929509
--- /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 c0fb104601..045e93cefd 100644
--- a/ui/lib/core/addon/components/form-field.hbs
+++ b/ui/lib/core/addon/components/form-field.hbs
@@ -306,8 +306,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 8e44b32686..0848251fc7 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);