From e1325c0153becb95b454810d9461efd7d3624a6a Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Fri, 11 Aug 2023 23:45:57 -0700
Subject: fix: :bug: a handful of bug fixes
keyboard interactions in textarea, multiple file highlighting, zombie process
---
extension/react-app/src/components/ComboBox.tsx | 49 +++++++++++++++++------
extension/react-app/src/components/PillButton.tsx | 6 +--
2 files changed, 39 insertions(+), 16 deletions(-)
(limited to 'extension/react-app')
diff --git a/extension/react-app/src/components/ComboBox.tsx b/extension/react-app/src/components/ComboBox.tsx
index 4e564000..b189e442 100644
--- a/extension/react-app/src/components/ComboBox.tsx
+++ b/extension/react-app/src/components/ComboBox.tsx
@@ -137,7 +137,9 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
const searchClient = new MeiliSearch({ host: "http://127.0.0.1:7700" });
const client = useContext(GUIClientContext);
const dispatch = useDispatch();
- const workspacePaths = useSelector((state: RootStore) => state.config.workspacePaths);
+ const workspacePaths = useSelector(
+ (state: RootStore) => state.config.workspacePaths
+ );
const [history, setHistory] = React.useState<string[]>([]);
// The position of the current command you are typing now, so the one that will be appended to history once you press enter
@@ -184,10 +186,12 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
setCurrentlyInContextQuery(true);
const providerAndQuery = segs[segs.length - 1] || "";
// Only return context items from the current workspace - the index is currently shared between all sessions
- const workspaceFilter =
- workspacePaths && workspacePaths.length > 0
- ? `workspace_dir IN [ ${workspacePaths.map((path) => `"${path}"`).join(", ")} ]`
- : undefined;
+ const workspaceFilter =
+ workspacePaths && workspacePaths.length > 0
+ ? `workspace_dir IN [ ${workspacePaths
+ .map((path) => `"${path}"`)
+ .join(", ")} ]`
+ : undefined;
searchClient
.index(SEARCH_INDEX_NAME)
.search(providerAndQuery, {
@@ -418,21 +422,30 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
// Prevent Downshift's default 'Enter' behavior.
(event.nativeEvent as any).preventDownshiftDefault = true;
- if (props.onEnter) {props.onEnter(event);}
+ if (props.onEnter) {
+ props.onEnter(event);
+ }
setCurrentlyInContextQuery(false);
} else if (event.key === "Tab" && items.length > 0) {
downshiftProps.setInputValue(items[0].name);
event.preventDefault();
} else if (event.key === "Tab") {
(event.nativeEvent as any).preventDownshiftDefault = true;
- } else if (
- (event.key === "ArrowUp" || event.key === "ArrowDown") &&
- event.currentTarget.value.split("\n").length > 1
- ) {
- (event.nativeEvent as any).preventDownshiftDefault = true;
} else if (event.key === "ArrowUp") {
- if (positionInHistory == 0) {return;}
- else if (
+ // Only go back in history if selectionStart is 0
+ // (i.e. the cursor is at the beginning of the input)
+ if (
+ positionInHistory == 0 ||
+ event.currentTarget.selectionStart !== 0
+ ) {
+ console.log(
+ "returning",
+ positionInHistory,
+ event.currentTarget.selectionStart
+ );
+ (event.nativeEvent as any).preventDownshiftDefault = true;
+ return;
+ } else if (
positionInHistory == history.length &&
(history.length === 0 ||
history[history.length - 1] !== event.currentTarget.value)
@@ -443,6 +456,15 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
setPositionInHistory((prev) => prev - 1);
setCurrentlyInContextQuery(false);
} else if (event.key === "ArrowDown") {
+ if (
+ positionInHistory === history.length ||
+ event.currentTarget.selectionStart !==
+ event.currentTarget.value.length
+ ) {
+ (event.nativeEvent as any).preventDownshiftDefault = true;
+ return;
+ }
+
if (positionInHistory < history.length) {
downshiftProps.setInputValue(history[positionInHistory + 1]);
}
@@ -454,6 +476,7 @@ const ComboBox = React.forwardRef((props: ComboBoxProps, ref) => {
setCurrentlyInContextQuery(false);
if (downshiftProps.isOpen && items.length > 0) {
downshiftProps.closeMenu();
+ (event.nativeEvent as any).preventDownshiftDefault = true;
} else {
(event.nativeEvent as any).preventDownshiftDefault = true;
// Remove focus from the input
diff --git a/extension/react-app/src/components/PillButton.tsx b/extension/react-app/src/components/PillButton.tsx
index 0dcd43eb..1ffdeeed 100644
--- a/extension/react-app/src/components/PillButton.tsx
+++ b/extension/react-app/src/components/PillButton.tsx
@@ -106,7 +106,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
&:focus {
outline: none;
- border-color: red;
+ border-color: ${vscForeground};
border-width: 1px;
border-style: solid;
}
@@ -185,13 +185,13 @@ const PillButton = (props: PillButtonProps) => {
<GridDiv
style={{
gridTemplateColumns:
- props.item.editable && props.addingHighlightedCode
+ props.item.editable && props.areMultipleItems
? "1fr 1fr"
: "1fr",
backgroundColor: vscBackground,
}}
>
- {props.item.editable && props.addingHighlightedCode && (
+ {props.item.editable && props.areMultipleItems && (
<ButtonDiv
data-tooltip-id={`edit-${props.index}`}
backgroundColor={"#8800aa55"}
--
cgit v1.2.3-70-g09d2