From 2f1f3ee9d8b2a70c9fd7ef5fdecf84dc1dbf9c45 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Tue, 1 Aug 2023 20:15:54 -0300 Subject: [PATCH 01/23] =?UTF-8?q?=F0=9F=90=9B=20fix(App.tsx):=20prevent=20?= =?UTF-8?q?default=20behavior=20of=20Ctrl+Backspace=20key=20combination=20?= =?UTF-8?q?to=20improve=20user=20experience?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit πŸ› fix(AccordionComponent/index.tsx): prevent default behavior of Backspace key to improve user experience πŸ› fix(floatComponent/index.tsx): prevent default behavior of Backspace key to improve user experience πŸ› fix(inputComponent/index.tsx): prevent default behavior of Backspace key to improve user experience πŸ› fix(inputListComponent/index.tsx): prevent default behavior of Ctrl+Backspace key combination to improve user experience πŸ› fix(intComponent/index.tsx): prevent default behavior of Backspace key to improve user experience πŸ› fix(genericModal/index.tsx): prevent default behavior of Backspace key to improve user experience --- src/frontend/src/App.tsx | 14 ++++++++++++++ .../src/components/AccordionComponent/index.tsx | 8 ++++++++ .../src/components/floatComponent/index.tsx | 4 ++++ .../src/components/inputComponent/index.tsx | 5 +++++ .../src/components/inputListComponent/index.tsx | 7 +++++++ src/frontend/src/components/intComponent/index.tsx | 4 ++++ src/frontend/src/modals/genericModal/index.tsx | 7 +++++++ src/frontend/src/utils/reactflowUtils.ts | 11 +++++++++++ 8 files changed, 60 insertions(+) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 0088081aebc..f6d7b2e46f0 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -121,6 +121,20 @@ export default function App() { ); }; + const handleKeyPress = (e: KeyboardEvent) => { + if (e.ctrlKey && e.key === "Backspace") { + e.preventDefault(); + e.stopPropagation(); + } + }; + + useEffect(() => { + document.addEventListener('keydown', handleKeyPress); + return () => { + document.removeEventListener('keydown', handleKeyPress); + }; + }, []); + return ( //need parent component with width and height
diff --git a/src/frontend/src/components/AccordionComponent/index.tsx b/src/frontend/src/components/AccordionComponent/index.tsx index 7212e6a1b6c..29405171bd3 100644 --- a/src/frontend/src/components/AccordionComponent/index.tsx +++ b/src/frontend/src/components/AccordionComponent/index.tsx @@ -32,6 +32,13 @@ export default function AccordionComponent({ value === "" ? setValue(keyValue) : setValue(""); } + const handleKeyDown = (event) => { + if (event.key === "Backspace") { + event.preventDefault(); + event.stopPropagation(); + } + }; + return ( <> { onChange(e.target.value); }} + onKeyDown={(e) => { + handleKeyDown(e, value, '0'); + }} />
); diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index 78b06c4115a..bad1d68b300 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from "react"; import { InputComponentType } from "../../types/components"; import { classNames } from "../../utils/utils"; import { Input } from "../ui/input"; +import { handleKeyDown } from "../../utils/reactflowUtils"; export default function InputComponent({ value, @@ -19,6 +20,7 @@ export default function InputComponent({ } }, [disabled, onChange]); + return (
{ onChange(e.target.value); }} + onKeyDown={(e) => { + handleKeyDown(e, value, ''); + }} /> {password && (