Merge pull request #193 from GavinJoyce/gj/fix-combobox-original-value

Fix Combobox click-outside behavior for non-primitive values

Author: GavinJoyce

ember-headlessui/addon/components/combobox.js

@@ -435,7 +435,8 @@ export default class ComboboxComponent extends Component {
       this.inputElement?.focus();
     }
 
-    this._originalValue = this.inputValue;
+    this._originalValue = this.args.value;
+    this.inputValue = this.args.value;
   }
 
   @action

ember-headlessui/addon/components/combobox/-option.js

@@ -34,8 +34,8 @@ export default class ComboboxOptionComponent extends Component {
 
     if (this.args.disabled) return;
 
-    this.args.setSelectedOption(this, e);
     this.callOnChangeWithSelectedValue();
+    this.args.setSelectedOption(this, e);
   }
 
   @action

test-app/tests/integration/components/combobox-test.js

@@ -237,6 +237,54 @@ module('Integration | Component | <Combobox>', function (hooks) {
         assert.dom(getComboboxInput()).hasValue('B');
       });
 
+      test('selecting an option puts the display value into Combobox.Input when displayValue is provided and values are objects', async function (assert) {
+        this.set('onChange', (value) => {
+          this.set('value', value);
+        });
+
+        this.setProperties({
+          value: null,
+          a: { value: 'a' },
+          b: { value: 'b' },
+          c: { value: 'c' },
+          displayValue: (option) => {
+            return option?.value?.toUpperCase() || 'None';
+          },
+        });
+
+        await render(hbs`
+          <Combobox
+            @value={{this.value}}
+            @onChange={{this.onChange}}
+            as |combobox|
+          >
+            <combobox.Input @displayValue={{this.displayValue}}/>
+            <combobox.Button data-test="headlessui-combobox-button-2">Trigger</combobox.Button>
+            <combobox.Options as |options|>
+              <options.Option @value={{this.a}}>Option A</options.Option>
+              <options.Option @value={{this.b}}>Option B</options.Option>
+              <options.Option @value={{this.c}}>Option C</options.Option>
+            </combobox.Options>
+          </Combobox>
+        `);
+
+        await click(getComboboxButton());
+        assertComboboxList({ state: ComboboxState.Visible });
+
+        await click(getComboboxOptions()[1]);
+        assert.dom(getComboboxInput()).hasValue('B');
+
+        await click(getComboboxButton());
+        assertComboboxList({ state: ComboboxState.Visible });
+
+        assert.dom(getComboboxInput()).hasValue('B');
+
+        await click(document.body);
+        assertComboboxList({ state: ComboboxState.InvisibleUnmounted });
+
+        assert.dom(getComboboxInput()).hasValue('B');
+      });
+
       test('opening and closing the combobox should not trigger spurious onChange events on the input', async function (assert) {
         let inputOnChangeCallCount = 0;
         let inputOnChangeValues = [];