summaryrefslogtreecommitdiffstats
path: root/toolkit/content/widgets/spinner.js
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/content/widgets/spinner.js')
-rw-r--r--toolkit/content/widgets/spinner.js47
1 files changed, 17 insertions, 30 deletions
diff --git a/toolkit/content/widgets/spinner.js b/toolkit/content/widgets/spinner.js
index 208ab1931..4901320b5 100644
--- a/toolkit/content/widgets/spinner.js
+++ b/toolkit/content/widgets/spinner.js
@@ -98,7 +98,7 @@ function Spinner(props, context) {
setState(newState) {
const { spinner } = this.elements;
const { value, items } = this.state;
- const { value: newValue, items: newItems, isValueSet, isInvalid } = newState;
+ const { value: newValue, items: newItems, isValueSet, isInvalid, smoothScroll = true } = newState;
if (this._isArrayDiff(newItems, items)) {
this.state = Object.assign(this.state, newState);
@@ -106,23 +106,23 @@ function Spinner(props, context) {
this._scrollTo(newValue, true);
} else if (newValue != value) {
this.state = Object.assign(this.state, newState);
- this._smoothScrollTo(newValue);
- }
-
- if (isValueSet) {
- if (isInvalid) {
- this._removeSelection();
+ if (smoothScroll) {
+ this._smoothScrollTo(newValue, true);
} else {
- this._updateSelection();
+ this._scrollTo(newValue, true);
}
}
+
+ if (isValueSet && !isInvalid) {
+ this._updateSelection();
+ } else {
+ this._removeSelection();
+ }
},
/**
* Whenever scroll event is detected:
* - Update the index state
- * - If a smooth scroll has reached its destination, set [isScrolling] state
- * to false
* - If the value has changed, update the [value] state and call [setValue]
* - If infinite scrolling is on, reset the scrolling position if necessary
*/
@@ -135,14 +135,8 @@ function Spinner(props, context) {
const value = itemsView[this.state.index + viewportTopOffset].value;
- // Check if smooth scrolling has reached its destination.
- // This prevents input box jump when input box changes values.
- if (this.state.value == value && this.state.isScrolling) {
- this.state.isScrolling = false;
- }
-
- // Call setValue if value has changed, and is not smooth scrolling
- if (this.state.value != value && !this.state.isScrolling) {
+ // Call setValue if value has changed
+ if (this.state.value != value) {
this.state.value = value;
this.props.setValue(value);
}
@@ -266,11 +260,11 @@ function Spinner(props, context) {
* Attach event listeners to the spinner and buttons.
*/
_attachEventListeners() {
- const { spinner } = this.elements;
+ const { spinner, container } = this.elements;
spinner.addEventListener("scroll", this, { passive: true });
- document.addEventListener("mouseup", this, { passive: true });
- document.addEventListener("mousedown", this);
+ container.addEventListener("mouseup", this, { passive: true });
+ container.addEventListener("mousedown", this, { passive: true });
},
/**
@@ -288,9 +282,6 @@ function Spinner(props, context) {
break;
}
case "mousedown": {
- // Use preventDefault to keep focus on input boxes
- event.preventDefault();
- event.target.setCapture();
this.state.mouseState = {
down: true,
layerX: event.layerX,
@@ -300,11 +291,11 @@ function Spinner(props, context) {
// An "active" class is needed to simulate :active pseudo-class
// because element is not focused.
event.target.classList.add("active");
- this._smoothScrollToIndex(index + 1);
+ this._smoothScrollToIndex(index - 1);
}
if (event.target == down) {
event.target.classList.add("active");
- this._smoothScrollToIndex(index - 1);
+ this._smoothScrollToIndex(index + 1);
}
if (event.target.parentNode == spinner) {
// Listen to dragging events
@@ -444,10 +435,6 @@ function Spinner(props, context) {
_smoothScrollToIndex(index) {
const element = this.elements.spinner.children[index];
if (element) {
- // Set the isScrolling flag before smooth scrolling begins
- // and remove it when it has reached the destination.
- // This prevents input box jump when input box changes values
- this.state.isScrolling = true;
element.scrollIntoView({
behavior: "smooth", block: "start"
});