fixed issues with alert sliders in chrome #458

ruuvi · Dec 11, 2024 · 09e1e70 · 09e1e70
1 parent 390400b
commit 09e1e70
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 7 deletions.
diff --git a/src/TextHelper.jsx b/src/TextHelper.jsx
@@ -5,11 +5,12 @@ export function uppercaseFirst(string) {
 
 function addHighlight(str, highlightedText) {
     return str.split(highlightedText).map((x, i, all) => {
-        return <>{x}{i === all.length - 1 ? null : <span style={{ color: "#f15a24" }}>{highlightedText}</span>}</>
+        return <span key={Math.random()}>{x}{i === all.length - 1 ? null : <span style={{ color: "#f15a24" }}>{highlightedText}</span>}</span>
     })
 }
 
 export function addNewlines(str, newlineChar, highlightedText) {
+
     return str.split(newlineChar || "\n").map((x, i, all) => {
         x = addHighlight(x, highlightedText)
         return <p style={{ marginTop: i > 0 ? 10 : undefined }} key={Math.random()}>{x}</p>

diff --git a/src/components/AddSensorModal.jsx b/src/components/AddSensorModal.jsx
@@ -58,6 +58,7 @@ function AddSensorModal(props) {
     }
     const getPinInput = (i) => {
         return <PinInputField ref={(input) => { pRef[i + ""] = input; }}
+            key={Math.random()}
             onKeyDown={e => {
                 if (e.code === "Backspace") {
                     let idx = e.target.dataset.index
@@ -75,9 +76,9 @@ function AddSensorModal(props) {
         if (text.indexOf("ruuvi.com/fi/tuki") !== -1) link = "ruuvi.com/fi/tuki"
         var splitted = text.split(link)
         if (splitted.length === 1) return text;
-        var out = [<span>{addNewlines(splitted[0])}</span>]
+        var out = [<span key={Math.random()}>{addNewlines(splitted[0])}</span>]
         for (var i = 1; i < splitted.length; i++) {
-            out.push(<Link display="inline-block" href={"https://" + link} isExternal color="primary">{link}</Link>)
+            out.push(<Link key={Math.random()} display="inline-block" href={"https://" + link} isExternal color="primary">{link}</Link>)
         }
         return out;
     }

diff --git a/src/components/AlertSlider.jsx b/src/components/AlertSlider.jsx
@@ -56,7 +56,7 @@ class AlertSlider extends React.Component {
         if (this.props.type === "temperature" || this.props.type === "pressure") {
             max = uh.value(max)
             min = uh.value(min)
-            
+
         }
         var sliderValues = [min, max]
         return <div style={{ display: 'flex', alignItems: 'center', marginLeft: 4, marginRight: 4 }}>
@@ -85,6 +85,7 @@ class AlertSlider extends React.Component {
                 renderThumb={({ props }) => (
                     <div
                         {...props}
+                        key={props.key + this.props.type}
                         style={{
                             ...props.style,
                             borderRadius: '6px',

diff --git a/src/index.jsx b/src/index.jsx
@@ -60,6 +60,5 @@ root.render(
       <App />
     </ErrorView>
     <ToastContainer />
-  </Suspense>,
-  document.getElementById('root')
+  </Suspense>
 );
diff --git a/src/states/Sensor.jsx b/src/states/Sensor.jsx
@@ -741,7 +741,7 @@ class Sensor extends Component {
                                             let latestValue = this.getLatestReading()[dataKey]
                                             if (latestValue === undefined && x !== "offline") return null;
                                             var alert = this.getAlert(x)
-                                            let key = alert ? alert.min + "" + alert.max + "" + alert.enabled.toString() + "" + alert.description : x
+                                            let key = alert ? alert.min + "" + alert.max + "" + alert.enabled.toString() + "" + alert.description + x : x
                                             return <AlertItem key={key} alerts={this.props.sensor.alerts} alert={alert} sensor={this.props.sensor}
                                                 latestValue={latestValue}
                                                 noUpgradeButton={this.isSharedSensor() || !this.sensorHasData()}