@refinitiv-ui/elements 7.13.2 → 7.13.3

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.13.3](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.13.2...@refinitiv-ui/elements@7.13.3) (2024-08-13)
+
+### Bug Fixes
+
+- **slider:** sync emitted value and input value ([#1198](https://github.com/Refinitiv/refinitiv-ui/issues/1198)) ([59099f6](https://github.com/Refinitiv/refinitiv-ui/commit/59099f619d95565f0aba2c2467056936c8b1e6bf))
+
 ## [7.13.2](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/elements@7.13.1...@refinitiv-ui/elements@7.13.2) (2024-07-30)
 
 ### Bug Fixes

package/lib/slider/elements/slider.js

@@ -806,20 +806,27 @@ let Slider = class Slider extends FormFieldElement {
      */
     updateNotifyProperty(name, value) {
         let shouldUpdate = false;
-        if (name === SliderDataName.to) {
-            shouldUpdate = this.isValueInBoundary(Number(value), SliderDataName.to);
-        }
-        else {
-            shouldUpdate = this.isValueInBoundary(Number(value), '');
-        }
+        const valueNumber = Number(value);
+        shouldUpdate = this.isValueInBoundary(valueNumber, name);
+        // Adjust update-pending from/to value based on min range
+        const adjustValue = (value) => {
+            const _currentValue = Number(value);
+            if (name === SliderDataName.from && _currentValue === this.toNumber) {
+                return String(_currentValue - this.minRangeNumber);
+            }
+            if (name === SliderDataName.to && _currentValue === this.fromNumber) {
+                return String(_currentValue + this.minRangeNumber);
+            }
+            return value;
+        };
         if (shouldUpdate) {
-            this[name] = value;
-            this.notifyPropertyChange(name, value);
-        }
-        else {
-            const inputName = `${name}Input`;
-            this[inputName].value = this[name];
+            this[name] = adjustValue(this.format(valueNumber));
+            this.notifyPropertyChange(name, this[name]);
         }
+        // Sync number field value with its component property counterpart.
+        // It's crucial especially when the value has been adjusted above.
+        const inputName = `${name}Input`;
+        this[inputName].value = this[name];
     }
     /**
      * Dispatch data {value, from, to} changed event
@@ -1091,7 +1098,18 @@ let Slider = class Slider extends FormFieldElement {
      * @returns {void}
      */
     onFromValueChange() {
-        if (this.isValueInBoundary(this.fromNumber, SliderDataName.from)) {
+        /**
+         * This method handles "from" value change triggered by
+         * both user interaction and programmatic update.
+         *
+         * In case of user interaction update,
+         * the value would be adjusted by min range before entering this method.
+         * That adjustment needs to be reverted.
+         *
+         * In case of programmatic value update,
+         * This method could handle the revert although there is no prior adjustment.
+         */
+        if (this.isValueInBoundary(this.fromNumber + this.minRangeNumber, SliderDataName.from)) {
             this.from = this.format(this.fromNumber);
         }
         else {
@@ -1128,10 +1146,11 @@ let Slider = class Slider extends FormFieldElement {
             return false;
         }
         if (this.range) {
-            if (valueFor === SliderDataName.to && value < this.fromNumber + this.minRangeNumber) {
-                return false;
-            }
-            else if (valueFor === SliderDataName.from && value > this.toNumber - this.minRangeNumber) {
+            const isFromOutOfBound = valueFor === SliderDataName.from &&
+                (value > this.toNumber || (this.minRangeNumber > 0 && value >= this.toNumber));
+            const isToOutOfBound = valueFor === SliderDataName.to &&
+                (value < this.fromNumber || (this.minRangeNumber > 0 && value <= this.fromNumber));
+            if (isFromOutOfBound || isToOutOfBound) {
                 return false;
             }
         }
@@ -1142,7 +1161,18 @@ let Slider = class Slider extends FormFieldElement {
      * @returns {void}
      */
     onToValueChange() {
-        if (this.isValueInBoundary(this.toNumber, SliderDataName.to)) {
+        /**
+         * This method handles "to" value change triggered by
+         * both user interaction and programmatic update.
+         *
+         * In case of user interaction update,
+         * the value would be adjusted by min range before entering this method.
+         * That adjustment needs to be reverted.
+         *
+         * In case of programmatic value update,
+         * This method could handle the revert although there is no prior adjustment.
+         */
+        if (this.isValueInBoundary(this.toNumber - this.minRangeNumber, SliderDataName.to)) {
             this.to = this.format(this.toNumber);
         }
         else {

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '7.13.2';
+export const VERSION = '7.13.3';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/elements",
-  "version": "7.13.2",
+  "version": "7.13.3",
   "description": "Element Framework Elements",
   "author": "LSEG",
   "license": "Apache-2.0",
@@ -373,5 +373,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "73f95529865ca81cce75efbe496d7e4b37e5d67a"
+  "gitHead": "80088aed35c12857c850127ce3a3fad421c3445a"
 }