🐛 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:
parent
3a76d2de59
commit
2f1f3ee9d8
8 changed files with 60 additions and 0 deletions
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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, '');
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue