oh-stepper: Fix NaN shown for Item state with unit & Fix unable to …

…control Item with NaN state (#2137)

Regression from #2090.

Reported on the community, see
https://community.openhab.org/t/openhab-4-1-0-m2-oh-stepper-not-working-properly/150372?u=florian-h05.

---------

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

bundles/org.openhab.ui/web/src/components/widgets/system/oh-stepper.vue

@@ -21,14 +21,14 @@ export default {
   },
   computed: {
     value () {
-      const applyOffset = (value) => (typeof this.config.offset === 'number') ? Number(this.toStepFixed(value + this.config.offset)) : value
+      const applyOffset = (num) => (!isNaN(this.config.offset)) ? Number(this.toStepFixed(num + Number(this.config.offset))) : num
       if (this.config.variable) {
         if (this.config.variableKey) {
           return applyOffset(this.getLastVariableKeyValue(this.context.vars[this.config.variable], this.config.variableKey))
         }
         return applyOffset(this.context.vars[this.config.variable])
       }
-      let value = applyOffset(Number(this.context.store[this.config.item].state))
+      let value = applyOffset(parseFloat(this.context.store[this.config.item].state))
       if (this.config.min !== undefined) value = Math.max(value, this.config.min)
       if (this.config.max !== undefined) value = Math.min(value, this.config.max)
       return value
@@ -48,11 +48,13 @@ export default {
       // uses the number of decimals in the step config to round the provided number
       if (!this.config.step) return value
       const nbDecimals = Number(this.config.step).toString().replace(',', '.').split('.')[1]
-      return parseFloat(Number(value)).toFixed(nbDecimals ? nbDecimals.length : 0)
+      // do NOT convert to number, instead return string, otherwise formatting wouldn't work
+      return parseFloat(value).toFixed(nbDecimals ? nbDecimals.length : 0)
     },
     onChange (value) {
-      const applyOffset = (value) => (typeof this.config.offset === 'number') ? Number(this.toStepFixed(value - this.config.offset)) : value
+      const applyOffset = (num) => (!isNaN(this.config.offset)) ? Number(this.toStepFixed(num - Number(this.config.offset))) : num
       let newValue = applyOffset(Number(this.toStepFixed(value)))
+      if (isNaN(newValue)) newValue = this.config.min || this.config.max || 0
       if (newValue === this.value) return
       if (this.config.variable) {
         if (this.config.variableKey) {