🐛 fix(App.tsx): prevent default behavior of Ctrl+Backspace key combination to improve user experience

🐛 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
This commit is contained in:
Cristhian Zanforlin Lousa 2023-08-01 20:15:54 -03:00
commit 2f1f3ee9d8
8 changed files with 60 additions and 0 deletions

View file

@ -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 ( return (
//need parent component with width and height //need parent component with width and height
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">

View file

@ -32,6 +32,13 @@ export default function AccordionComponent({
value === "" ? setValue(keyValue) : setValue(""); value === "" ? setValue(keyValue) : setValue("");
} }
const handleKeyDown = (event) => {
if (event.key === "Backspace") {
event.preventDefault();
event.stopPropagation();
}
};
return ( return (
<> <>
<Accordion <Accordion
@ -39,6 +46,7 @@ export default function AccordionComponent({
className="w-full" className="w-full"
value={value} value={value}
onValueChange={setValue} onValueChange={setValue}
onKeyDown={handleKeyDown}
> >
<AccordionItem value={keyValue} className="border-b"> <AccordionItem value={keyValue} className="border-b">
<AccordionTrigger <AccordionTrigger

View file

@ -1,6 +1,7 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
import { handleKeyDown } from "../../utils/reactflowUtils";
export default function FloatComponent({ export default function FloatComponent({
value, value,
@ -43,6 +44,9 @@ export default function FloatComponent({
onChange={(e) => { onChange={(e) => {
onChange(e.target.value); onChange(e.target.value);
}} }}
onKeyDown={(e) => {
handleKeyDown(e, value, '0');
}}
/> />
</div> </div>
); );

View file

@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
import { InputComponentType } from "../../types/components"; import { InputComponentType } from "../../types/components";
import { classNames } from "../../utils/utils"; import { classNames } from "../../utils/utils";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
import { handleKeyDown } from "../../utils/reactflowUtils";
export default function InputComponent({ export default function InputComponent({
value, value,
@ -19,6 +20,7 @@ export default function InputComponent({
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div className="relative w-full"> <div className="relative w-full">
<Input <Input
@ -34,6 +36,9 @@ export default function InputComponent({
onChange={(e) => { onChange={(e) => {
onChange(e.target.value); onChange(e.target.value);
}} }}
onKeyDown={(e) => {
handleKeyDown(e, value, '');
}}
/> />
{password && ( {password && (
<button <button

View file

@ -5,6 +5,7 @@ import _ from "lodash";
import { classNames } from "../../utils/utils"; import { classNames } from "../../utils/utils";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
import { handleKeyDown } from "../../utils/reactflowUtils";
export default function InputListComponent({ export default function InputListComponent({
value, value,
@ -39,6 +40,12 @@ export default function InputListComponent({
newInputList[idx] = e.target.value; newInputList[idx] = e.target.value;
onChange(newInputList); onChange(newInputList);
}} }}
onKeyDown={(e) => {
if (e.ctrlKey && e.key === "Backspace") {
e.preventDefault();
e.stopPropagation();
}
}}
/> />
{idx === value.length - 1 ? ( {idx === value.length - 1 ? (
<button <button

View file

@ -1,6 +1,7 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { FloatComponentType } from "../../types/components"; import { FloatComponentType } from "../../types/components";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
import { handleKeyDown } from "../../utils/reactflowUtils";
export default function IntComponent({ export default function IntComponent({
value, value,
@ -17,6 +18,8 @@ export default function IntComponent({
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div className="w-full"> <div className="w-full">
<Input <Input
@ -37,6 +40,7 @@ export default function IntComponent({
) { ) {
event.preventDefault(); event.preventDefault();
} }
handleKeyDown(event, value, '0');
}} }}
type="number" type="number"
step="1" step="1"

View file

@ -22,6 +22,7 @@ import {
varHighlightHTML, varHighlightHTML,
} from "../../utils/utils"; } from "../../utils/utils";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
import { handleKeyDown } from "../../utils/reactflowUtils";
export default function GenericModal({ export default function GenericModal({
field_name = "", field_name = "",
@ -213,6 +214,9 @@ export default function GenericModal({
checkVariables(e.target.value); checkVariables(e.target.value);
}} }}
placeholder="Type message here." placeholder="Type message here."
onKeyDown={(e) => {
handleKeyDown(e, inputValue, '');
}}
/> />
) : type === TypeModal.PROMPT && !isEdit ? ( ) : type === TypeModal.PROMPT && !isEdit ? (
<TextAreaContentView /> <TextAreaContentView />
@ -225,6 +229,9 @@ export default function GenericModal({
setInputValue(e.target.value); setInputValue(e.target.value);
}} }}
placeholder="Type message here." placeholder="Type message here."
onKeyDown={(e) => {
handleKeyDown(e, value, '');
}}
/> />
) : ( ) : (
<></> <></>

View file

@ -232,3 +232,14 @@ export function addVersionToDuplicates(flow: FlowType, flows: FlowType[]) {
return newName; return newName;
} }
<<<<<<< HEAD
=======
export function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>, inputValue: string | string[] | null, block: string)
{
if (e.ctrlKey && inputValue === block && e.key === "Backspace") {
e.preventDefault();
e.stopPropagation();
}
};
>>>>>>> bugfix-backctrl