🐛 <Listbox> should scroll option into view only once

ember-headlessui/addon/components/listbox.hbs

@@ -23,6 +23,8 @@
       openListbox=this.openListbox
       closeListbox=this.closeListbox
       handleClickOutside=this.handleClickOutside
+      selectedValue=@value
+      scrollIntoView=this.scrollIntoView
     )
     Button=(component
       'listbox/-button'

ember-headlessui/addon/components/listbox.js

@@ -184,8 +184,6 @@ export default class ListboxComponent extends Component {
       if (this.args.value === optionComponent.args.value) {
         this.selectedOptionIndex = this.activeOptionIndex =
           this.optionElements.length - 1;
-
-        this.scrollIntoView(optionElement);
       }
     }
 

ember-headlessui/addon/components/listbox/-option.hbs

@@ -4,6 +4,7 @@
     id={{this.guid}}
     tabindex='-1'
     {{this.registerOption}}
+    {{this.scroll this.shouldScroll @scrollIntoView}}
     {{on 'focus' (fn @setActiveOption this)}}
     {{on 'mouseover' (fn @setActiveOption this)}}
     {{on 'mouseout' @unsetActiveOption}}

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

@@ -7,11 +7,23 @@ import { modifier } from 'ember-modifier';
 
 export default class ListboxOptionComponent extends Component {
   @tracked guid = `${guidFor(this)}-headlessui-listbox-option`;
+  @tracked shouldScroll = false;
+
+  constructor() {
+    super(...arguments);
+    this.shouldScroll = this.args.selectedValue === this.args.value;
+  }
 
   registerOption = modifier((element) => {
     this.args.registerOptionElement(this, element);
   });
 
+  scroll = modifier((element, [shouldScroll, scrollFn]) => {
+    if (shouldScroll) {
+      scrollFn(element);
+    }
+  });
+
   @action
   handleClick(e) {
     e.stopPropagation();

ember-headlessui/addon/components/listbox/-options.hbs

@@ -32,6 +32,8 @@
             setActiveOption=@setActiveOption
             unsetActiveOption=@unsetActiveOption
             setSelectedOption=@setSelectedOption
+            selectedValue=@selectedValue
+            scrollIntoView=@scrollIntoView
           )
         )
       }}

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

@@ -3440,4 +3440,42 @@ module('Integration | Component | <Listbox>', function (hooks) {
 
     assert.strictEqual(callCount, 0, 'onSubmit not called');
   });
+
+  test('should scroll to selected item only once', async function (assert) {
+    this.set('items', [1, 2, 3, 4]);
+    this.set('selected', 1);
+    this.set('select', (item) => {
+      this.selected = item;
+    });
+
+    let factory = this.owner.factoryFor('component:listbox');
+    let callCount = 0;
+    class ExtendedListbox extends factory.class {
+      scrollIntoView() {
+        callCount++;
+      }
+    }
+
+    this.owner.unregister('component:listbox');
+    this.owner.register('component:listbox', ExtendedListbox);
+
+    await render(hbs`
+      <Listbox @onChange={{this.select}} @value={{this.selected}} as |listbox|>
+        <listbox.Button>Trigger</listbox.Button>
+        <listbox.Options as |options|>
+          {{#each this.items as |item|}}
+            <options.Option @value={{item}} as |option|>
+              {{item}}
+            </options.Option>
+          {{/each}}
+        </listbox.Options>
+      </Listbox>
+    `);
+
+    await click(getListboxButton());
+    let options = getListboxOptions();
+    await click(options[2]);
+
+    assert.strictEqual(callCount, 1, 'called exactly once');
+  });
 });