From b7d8989f6324908341f62fd4fd163366cbc78a1f Mon Sep 17 00:00:00 2001
From: istarkov <istarkov@gmail.com>
Date: Fri, 9 Dec 2022 09:22:16 +0000
Subject: [PATCH 1/3] Fix menu not closed on blur

---
 .../style-panel/shared/css-value-input/css-value-input.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
index de425c3448..3d56793b6c 100644
--- a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
+++ b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -234,6 +234,7 @@ export const CssValueInput = ({
   ...props
 }: CssValueInputProps & { icon?: JSX.Element }) => {
   const onChange = (input: string) => {
+    console.log(2);
     // We don't know what's inside the input,
     // preserve current unit value if exists
     props.onChange({
@@ -244,6 +245,7 @@ export const CssValueInput = ({
   };
 
   const onChangeComplete = (value: CssValueInputValue) => {
+    console.log(1);
     if (value.type !== "intermediate" && value.type !== "invalid") {
       props.onChangeComplete(value);
       return;
@@ -309,13 +311,13 @@ export const CssValueInput = ({
   });
 
   const handleOnBlur: KeyboardEventHandler = (event) => {
+    inputProps.onBlur(event);
     // When select is open, onBlur is triggered,though we don't want a change event in this case.
-    if (isUnitsOpen || isOpen) {
+    if (isUnitsOpen || (isOpen && !getMenuProps().empty)) {
       return;
     }
 
     onChangeComplete(value);
-    inputProps.onBlur(event);
   };
 
   const handleKeyDown = useHandleKeyDown({

From b68da38d2be03cb9ec8eb9741eca193ef89f74b0 Mon Sep 17 00:00:00 2001
From: istarkov <istarkov@gmail.com>
Date: Fri, 9 Dec 2022 09:23:29 +0000
Subject: [PATCH 2/3] remove console

---
 .../style-panel/shared/css-value-input/css-value-input.tsx      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
index 3d56793b6c..c508ca9b79 100644
--- a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
+++ b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -234,7 +234,6 @@ export const CssValueInput = ({
   ...props
 }: CssValueInputProps & { icon?: JSX.Element }) => {
   const onChange = (input: string) => {
-    console.log(2);
     // We don't know what's inside the input,
     // preserve current unit value if exists
     props.onChange({
@@ -245,7 +244,6 @@ export const CssValueInput = ({
   };
 
   const onChangeComplete = (value: CssValueInputValue) => {
-    console.log(1);
     if (value.type !== "intermediate" && value.type !== "invalid") {
       props.onChangeComplete(value);
       return;

From 5946b0ef0cc360580e1d2b67cbd5d467a86e0cd5 Mon Sep 17 00:00:00 2001
From: istarkov <istarkov@gmail.com>
Date: Fri, 9 Dec 2022 13:31:32 +0000
Subject: [PATCH 3/3] Fix comments

---
 .../shared/css-value-input/css-value-input.tsx   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
index c508ca9b79..01fa4c9622 100644
--- a/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
+++ b/apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -308,10 +308,18 @@ export const CssValueInput = ({
     shouldHandleEvent,
   });
 
+  const menuProps = getMenuProps();
+
   const handleOnBlur: KeyboardEventHandler = (event) => {
     inputProps.onBlur(event);
-    // When select is open, onBlur is triggered,though we don't want a change event in this case.
-    if (isUnitsOpen || (isOpen && !getMenuProps().empty)) {
+    // When unit select is open, onBlur is triggered,though we don't want a change event in this case.
+    if (isUnitsOpen) {
+      return;
+    }
+
+    // If the menu is open and visible we don't want to trigger onChangeComplete
+    // as it will be done by Downshift
+    if (isOpen && !menuProps.empty) {
       return;
     }
 
@@ -320,7 +328,7 @@ export const CssValueInput = ({
 
   const handleKeyDown = useHandleKeyDown({
     // In case of menu is really open do not prevent default downshift Enter key behaviour
-    ignoreEnter: isOpen && !getMenuProps().empty,
+    ignoreEnter: isOpen && !menuProps.empty,
     onChangeComplete,
     value,
     onChange: props.onChange,
@@ -393,7 +401,7 @@ export const CssValueInput = ({
           sideOffset={8}
           collisionPadding={10}
         >
-          <ComboboxListbox {...getMenuProps()}>
+          <ComboboxListbox {...menuProps}>
             {isOpen &&
               items.map((item, index) => (
                 <ComboboxListboxItem