From e817b6f0a85632426df0c06f7d3d9dda9f8407ce Mon Sep 17 00:00:00 2001
From: Braulio <braulio.diez@gmail.com>
Date: Sun, 22 Sep 2024 10:29:56 +0200
Subject: [PATCH 1/2] arrow fix

---
 src/pods/canvas/use-keyboard-displacement.tsx | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/pods/canvas/use-keyboard-displacement.tsx b/src/pods/canvas/use-keyboard-displacement.tsx
index 6767f9dd..81972650 100644
--- a/src/pods/canvas/use-keyboard-displacement.tsx
+++ b/src/pods/canvas/use-keyboard-displacement.tsx
@@ -2,6 +2,15 @@ import { useEffect } from 'react';
 import { useCanvasContext } from '@/core/providers';
 import { Coord } from '@/core/model';
 
+const arrowKeys = {
+  arrowUp: 'ArrowUp',
+  arrowDown: 'ArrowDown',
+  arrowLeft: 'ArrowLeft',
+  arrowRight: 'ArrowRight',
+};
+
+const isArrowKey = (key: string) => Object.values(arrowKeys).includes(key);
+
 export const useKeyboardDisplacement = () => {
   const { selectionInfo, updateShapePosition, isInlineEditing } =
     useCanvasContext();
@@ -32,7 +41,9 @@ export const useKeyboardDisplacement = () => {
         return;
       }
 
-      event.preventDefault();
+      if (isArrowKey(event.key)) {
+        event.preventDefault();
+      }
 
       if (selectionInfo.selectedShapesIds.length === 0) {
         return;
@@ -40,25 +51,25 @@ export const useKeyboardDisplacement = () => {
 
       const step = event.shiftKey ? 25 : 2; // If shift is pressed, move faster
       switch (event.key) {
-        case 'ArrowUp':
+        case arrowKeys.arrowUp:
           updateShapeCollectionPosition(selectionInfo.selectedShapesIds, {
             x: 0,
             y: -step,
           });
           break;
-        case 'ArrowDown':
+        case arrowKeys.arrowDown:
           updateShapeCollectionPosition(selectionInfo.selectedShapesIds, {
             x: 0,
             y: step,
           });
           break;
-        case 'ArrowLeft':
+        case arrowKeys.arrowLeft:
           updateShapeCollectionPosition(selectionInfo.selectedShapesIds, {
             x: -step,
             y: 0,
           });
           break;
-        case 'ArrowRight':
+        case arrowKeys.arrowRight:
           updateShapeCollectionPosition(selectionInfo.selectedShapesIds, {
             x: step,
             y: 0,

From 3e00011747d39b6f00e6e2e683fab0e6d6a53d32 Mon Sep 17 00:00:00 2001
From: Braulio <braulio.diez@gmail.com>
Date: Sun, 22 Sep 2024 10:36:11 +0200
Subject: [PATCH 2/2] fix keyboard modal

---
 .../components/icon-selector/modal/icon-modal.tsx     | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/pods/properties/components/icon-selector/modal/icon-modal.tsx b/src/pods/properties/components/icon-selector/modal/icon-modal.tsx
index 997930fb..90b9478c 100644
--- a/src/pods/properties/components/icon-selector/modal/icon-modal.tsx
+++ b/src/pods/properties/components/icon-selector/modal/icon-modal.tsx
@@ -5,6 +5,8 @@ import { useIconModal } from './use-icon-modal.hook';
 import { IconModalSearchBar } from './components/searchbar.component';
 import { IconModalCategories } from './components/categories.component';
 import { IconList } from './components/icon-list.component';
+import { useEffect } from 'react';
+import { useCanvasContext } from '@/core/providers';
 
 interface IconModalProps {
   actualIcon: IconInfo;
@@ -13,6 +15,7 @@ interface IconModalProps {
 
 export const IconModal: React.FC<IconModalProps> = props => {
   const { actualIcon, onChange } = props;
+  const { setIsInlineEditing } = useCanvasContext();
   const { closeModal } = useModalDialogContext();
 
   const {
@@ -33,6 +36,14 @@ export const IconModal: React.FC<IconModalProps> = props => {
     closeModal();
   };
 
+  useEffect(() => {
+    setIsInlineEditing(true);
+
+    return () => {
+      setIsInlineEditing(false);
+    };
+  }, []);
+
   return (
     <div className={classes.container}>
       <h2 className={classes.title}>Choose your icon</h2>