Various tweaks

addon/components/ember-scrollable.js

@@ -19,6 +19,8 @@ const scrollbarSelector = '.tse-scrollbar';
 const contentSelector = '.tse-content';
 
 export default Component.extend(DomMixin, {
+  scrollbarThickness: service(),
+
   layout,
   tagName: '',
 
@@ -124,10 +126,9 @@ export default Component.extend(DomMixin, {
    */
   verticalScrollbar: null,
 
-  scrollbarThickness: service(),
-
   didReceiveAttrs() {
-    this._super();
+    this._super(...arguments);
+
     const horizontal = this.horizontal;
     const vertical = this.horizontal;
     // Keep backwards compatible functionality wherein vertical is default when neither vertical or horizontal are explicitly set
@@ -148,8 +149,17 @@ export default Component.extend(DomMixin, {
     this.el.addEventListener('mousemove', this.mouseMoveHandler);
   }),
 
+  /**
+   * Update action should be called when size of the scroll area changes
+   */
+  recalculate: action(function () {
+    // TODO this is effectively the same as `update`, except for update returns the passed in value. Keep one, and rename `resizeScrollbar` to be clear.
+    this.resizeScrollbar();
+  }),
+
   willDestroy() {
     this._super(...arguments);
+
     this.el?.removeEventListener(
       'transitionend webkitTransitionEnd',
       this._resizeHandler
@@ -471,14 +481,6 @@ export default Component.extend(DomMixin, {
   },
 
   actions: {
-    /**
-     * Update action should be called when size of the scroll area changes
-     */
-    recalculate() {
-      // TODO this is effectively the same as `update`, except for update returns the passed in value. Keep one, and rename `resizeScrollbar` to be clear.
-      this.resizeScrollbar();
-    },
-
     /**
      * Can be called when scrollbars change as a result of value change,
      *

addon/components/ember-scrollbar.js

@@ -26,8 +26,6 @@ export default Component.extend(DomMixin, {
   onDragEnd() {},
 
   horizontal: false,
-  isDragging: false,
-  showHandle: false,
   handleSize: null,
   handleOffset: 0,
 

addon/templates/components/ember-scrollable.hbs

@@ -3,14 +3,14 @@
     if vertical 'vertical'
   }}'
   {{did-insert this.elementInserted}}
-  {{on-resize (action 'recalculate')}}
+  {{on-resize this.recalculate}}
 >
   {{#if horizontal}}
     {{ember-scrollbar
       handleOffset=horizontalHandleOffset
       handleSize=horizontalHandleSize
       horizontal=true
-      showHandle=showHandle
+      showHandle=this.showHandle
       isDragging=isHorizontalDragging
       onJumpTo=(action 'horizontalJumpTo')
       onDrag=(action 'horizontalDrag')
@@ -23,7 +23,7 @@
       handleOffset=verticalHandleOffset
       handleSize=verticalHandleSize
       horizontal=false
-      showHandle=showHandle
+      showHandle=this.showHandle
       isDragging=isVerticalDragging
       onJumpTo=(action 'verticalJumpTo')
       onDrag=(action 'verticalDrag')
@@ -35,7 +35,7 @@
     <div class='tse-content scrollable-content'>
       {{yield
         (hash
-          recalculate=(action 'recalculate')
+          recalculate=this.recalculate
           update=(action 'update')
           scrollTop=(action 'scrollTop')
         )

addon/templates/components/ember-scrollbar.hbs

@@ -1 +1,5 @@
-<div class="drag-handle {{if showHandle 'visible'}}" onmousedown={{action 'startDrag'}} style={{handleStyles}}></div>
+<div
+  class='drag-handle {{if @showHandle 'visible'}}'
+  style={{this.handleStyles}}
+  {{on 'mousedown' (action 'startDrag')}}
+></div>