From f22fecb239abc0ef71ef1f47c7cf9e2ed8c43e58 Mon Sep 17 00:00:00 2001
From: stefano bovio <stefano.bovio@geosolutionsgroup.com>
Date: Thu, 14 Sep 2023 15:33:40 +0200
Subject: [PATCH] #9363 Wrong scale value reported using the scroll wheel
 (#9401) (#9440)

---
 web/client/components/mapcontrols/scale/ScaleBox.jsx  | 11 ++++++-----
 .../mapcontrols/scale/__tests__/ScaleBox-test.jsx     |  6 ++++++
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/client/components/mapcontrols/scale/ScaleBox.jsx b/web/client/components/mapcontrols/scale/ScaleBox.jsx
index e3c780bda7..39333c2303 100644
--- a/web/client/components/mapcontrols/scale/ScaleBox.jsx
+++ b/web/client/components/mapcontrols/scale/ScaleBox.jsx
@@ -45,7 +45,7 @@ class ScaleBox extends React.Component {
     }
 
     onComboChange = (event) => {
-        var selectedZoomLvl = parseInt(event.nativeEvent.target.value, 10);
+        let selectedZoomLvl = parseInt(event.nativeEvent.target.value, 10);
         this.props.onChange(selectedZoomLvl, this.props.scales[selectedZoomLvl]);
     };
 
@@ -58,14 +58,15 @@ class ScaleBox extends React.Component {
     };
 
     render() {
-        var control = null;
+        let control = null;
+        const currentZoomLvl = Math.round(this.props.currentZoomLvl);
         if (this.props.readOnly) {
             control =
-                <label>{this.props.template(this.props.scales[this.props.currentZoomLvl], this.props.currentZoomLvl)}</label>
+                <label>{this.props.template(this.props.scales[currentZoomLvl], currentZoomLvl)}</label>
             ;
         } else if (this.props.useRawInput) {
             control =
-                (<select label={this.props.label} onChange={this.onComboChange} bsSize="small" value={this.props.currentZoomLvl || ""}>
+                (<select label={this.props.label} onChange={this.onComboChange} bsSize="small" value={currentZoomLvl || ""}>
                     {this.getOptions()}
                 </select>)
             ;
@@ -73,7 +74,7 @@ class ScaleBox extends React.Component {
             control =
                 (<Form inline><FormGroup bsSize="small">
                     <ControlLabel>{this.props.label}</ControlLabel>
-                    <FormControl componentClass="select" onChange={this.onComboChange} value={this.props.currentZoomLvl || ""}>
+                    <FormControl componentClass="select" onChange={this.onComboChange} value={currentZoomLvl || ""}>
                         {this.getOptions()}
                     </FormControl>
                 </FormGroup></Form>)
diff --git a/web/client/components/mapcontrols/scale/__tests__/ScaleBox-test.jsx b/web/client/components/mapcontrols/scale/__tests__/ScaleBox-test.jsx
index 2ba5a5ef4b..5368dde32e 100644
--- a/web/client/components/mapcontrols/scale/__tests__/ScaleBox-test.jsx
+++ b/web/client/components/mapcontrols/scale/__tests__/ScaleBox-test.jsx
@@ -96,4 +96,10 @@ describe('ScaleBox', () => {
         expect(domLabel).toExist();
         expect(domLabel.innerHTML).toContain("Scale:");
     });
+
+    it('should support not rounded zoom levels', () => {
+        TestUtils.act(() => { ReactDOM.render(<ScaleBox currentZoomLvl={5.1}/>, document.getElementById('container')); });
+        const select = document.querySelector('select');
+        expect(select.value).toBe('5');
+    });
 });