fix(scrollbar): rebuild drag helper when orientation changes at runtime

ElementDragHelper captures its constraint axis at construction time, so
flipping the scrollbar orientation while a handle element exists left
the helper still constraining drags to the old axis. _onHandleDrag
would then read the wrong component of the position vector and value
updates could stop working until the helper was destroyed and rebuilt
through some other path (e.g. handleEntity reassignment).

Extract the helper-rebuild logic from _onHandleElementGain into a
shared _rebuildDragHelper method, and call it (plus
_updateHandlePositionAndSize) from the orientation setter when there
is an active handle element.

Adds a regression test that flips the orientation post-attach and
verifies the drag helper is rebuilt for the new axis.

Reported by Copilot in #8693.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: willeastcott

src/framework/components/scrollbar/component.js

@@ -118,8 +118,12 @@ class ScrollbarComponent extends Component {
 
         this._orientation = arg;
 
+        // ElementDragHelper captures its axis at construction, so an existing helper
+        // must be rebuilt to keep dragging in sync with the new orientation
         if (this._handleEntity?.element) {
             this._handleEntity.element[this._getOppositeDimension()] = 0;
+            this._rebuildDragHelper();
+            this._updateHandlePositionAndSize();
         }
     }
 
@@ -253,14 +257,17 @@ class ScrollbarComponent extends Component {
 
     _onHandleElementGain() {
         this._handleEntityElementSubscribe();
+        this._rebuildDragHelper();
+        this._updateHandlePositionAndSize();
+    }
+
+    _rebuildDragHelper() {
         this._destroyDragHelper();
         this._handleDragHelper = new ElementDragHelper(this._handleEntity.element, this._getAxis());
         // ElementDragHelper defaults to enabled; mirror the component's current state so a helper
         // built while the scrollbar is disabled does not start out draggable
         this._handleDragHelper.enabled = this.enabled && this.entity.enabled;
         this._handleDragHelper.on('drag:move', this._onHandleDrag, this);
-
-        this._updateHandlePositionAndSize();
     }
 
     _onHandleElementLose() {

test/framework/components/scrollbar/component.test.mjs

@@ -169,6 +169,26 @@ describe('ScrollbarComponent', function () {
             expect(handle.element.height).to.equal(heightBefore);
         });
 
+        it('rebuilds the drag helper for the new axis when orientation changes at runtime', function () {
+            const handle = new Entity();
+            handle.addComponent('element', { type: ELEMENTTYPE_IMAGE });
+
+            const e = new Entity();
+            e.addChild(handle);
+            e.addComponent('element', { type: ELEMENTTYPE_IMAGE });
+            e.addComponent('scrollbar', { handleEntity: handle, orientation: ORIENTATION_HORIZONTAL });
+            app.root.addChild(e);
+
+            // ElementDragHelper captures its axis at construction, so the helper must be
+            // rebuilt for the new axis when orientation flips - otherwise drags stay on the
+            // old axis and value updates can stop working
+            expect(e.scrollbar._handleDragHelper._axis).to.equal('x');
+
+            e.scrollbar.orientation = ORIENTATION_VERTICAL;
+
+            expect(e.scrollbar._handleDragHelper._axis).to.equal('y');
+        });
+
     });
 
     describe('#handleEntity', function () {