afterScoll action is triggered twice

[khaledallen]

I have a component that has the scroll-to helper embedded inside it and needs to bubble an action up to its parent component. It's an implementation for an accordion-style dropdown box, and the afterScroll action is to open the next accordion.
When the scroll-to is clicked, the afterScroll action is correctly triggered and bubbles up to the parent correctly, but it happens twice, resulting in the next-next accordion being opened.

Code for the Accordion Component:

        doNextAccordian: function(){
	  console.log("I'm the component");
	  this.get('aNeatFunction')();
  }
}

Accordion Component HBS:

	<h3 {{action "open"}} id="next" class="accordian-header accordian-{{color}}"><div>{{title}}</div><span  class="accordian-expand {{if accordianOpen "accordian-open"}}">&#9660;</span></h3>
	<div class="accordian-content {{if accordianOpen "accordian-open"}}">
		<div class="row">
			<div class="col col-12">
        {{yield}}
			</div>

			<div class="row">
				<div class="col col-7"></div>
				<div class="col col-4">
					{{scroll-to
						href='#next'
						label="next"
						duration=1000
						class="btn grey-btn"
						afterScroll=(action "doNextAccordian")}}
				</div>
			</div>
		</div>
	</div>
</div>

Console Output:

      I'm the component
      I'm the component

The only thing I could think of is that every accordian has the target ID, but I tested it with just a single instance of the ID, and the function is still triggered twice.