Merge pull request #577 from webstudio-is/fix-blur

Fix menu not closed on blur

apps/designer/app/designer/features/style-panel/shared/css-value-input/css-value-input.tsx

@@ -308,19 +308,27 @@ export const CssValueInput = ({
     shouldHandleEvent,
   });
 
+  const menuProps = getMenuProps();
+
   const handleOnBlur: KeyboardEventHandler = (event) => {
-    // When select is open, onBlur is triggered,though we don't want a change event in this case.
-    if (isUnitsOpen || isOpen) {
+    inputProps.onBlur(event);
+    // 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;
     }
 
     onChangeComplete(value);
-    inputProps.onBlur(event);
   };
 
   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