From 168d0a5018ebbfc193a623c69bdfde26c5f8c5bc Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Sun, 4 Feb 2024 16:07:18 +0200
Subject: [PATCH 1/2] Removes number conversion for dirty input

---
 cypress/e2e/layers.cy.ts       | 19 +++++++++++++++++++
 src/components/InputNumber.tsx |  9 ++++++---
 src/components/InputSpec.tsx   |  1 +
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/cypress/e2e/layers.cy.ts b/cypress/e2e/layers.cy.ts
index d59f9eed4..fb7d08b44 100644
--- a/cypress/e2e/layers.cy.ts
+++ b/cypress/e2e/layers.cy.ts
@@ -280,6 +280,25 @@ describe("layers", () => {
             });
           });
         });
+
+        describe("opacity", () => {
+          let bgId: string;
+          beforeEach(() => {
+            bgId = createBackground();
+            when.click("layer-list-item:background:" + bgId);
+            when.type("spec-field-input:background-opacity", "0.");
+          });
+
+          it("should keep '.' in the input field", () => {
+            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
+          });
+
+          it("should keep revert to a valid value when focus out", () => {
+            when.click("layer-list-item:background:" + bgId);
+            then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue('0');
+          });
+        });
+
       });
 
       describe("filter", () => {
diff --git a/src/components/InputNumber.tsx b/src/components/InputNumber.tsx
index 24ce52d10..64f2e139c 100644
--- a/src/components/InputNumber.tsx
+++ b/src/components/InputNumber.tsx
@@ -19,7 +19,10 @@ type InputNumberState = {
   editing: boolean
   editingRange?: boolean
   value?: number
-  dirtyValue?: number
+  /**
+   * This is the value that is currently being edited. It can be an invalid value.
+   */
+  dirtyValue?: number | string | undefined
 }
 
 export default class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
@@ -66,7 +69,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
     }
 
     this.setState({
-      dirtyValue: newValue === "" ? undefined : value,
+      dirtyValue: newValue === "" ? undefined : newValue,
     })
   }
 
@@ -125,7 +128,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
         // for example we might go from 13 to 13.23, however because we know
         // that came from a keyboard event we always want to increase by a
         // single step value.
-        if (value < this.state.dirtyValue!) {
+        if (value < +this.state.dirtyValue!) {
           value = this.state.value! - step;
         }
         else {
diff --git a/src/components/InputSpec.tsx b/src/components/InputSpec.tsx
index 20851dd88..311bc142e 100644
--- a/src/components/InputSpec.tsx
+++ b/src/components/InputSpec.tsx
@@ -49,6 +49,7 @@ export default class SpecField extends React.Component<SpecFieldProps> {
       value: this.props.value,
       default: this.props.fieldSpec?.default,
       name: this.props.fieldName,
+      "data-wd-key": "spec-field-input:" + this.props.fieldName,
       onChange: (newValue: number | undefined | (string | number | undefined)[]) => this.props.onChange!(this.props.fieldName, newValue),
       'aria-label': this.props['aria-label'],
     }

From fd70ca774447f05d73daac5330ff2c2338d4673d Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Sun, 4 Feb 2024 16:09:40 +0200
Subject: [PATCH 2/2] change test name

---
 cypress/e2e/layers.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/layers.cy.ts b/cypress/e2e/layers.cy.ts
index fb7d08b44..4be2949fe 100644
--- a/cypress/e2e/layers.cy.ts
+++ b/cypress/e2e/layers.cy.ts
@@ -293,7 +293,7 @@ describe("layers", () => {
             then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue("0.");
           });
 
-          it("should keep revert to a valid value when focus out", () => {
+          it("should revert to a valid value when focus out", () => {
             when.click("layer-list-item:background:" + bgId);
             then(get.elementByTestId("spec-field-input:background-opacity")).shouldHaveValue('0');
           });