From 23a083a130681801ba8821d00437190e3dbe45a5 Mon Sep 17 00:00:00 2001 From: Josh Holmer Date: Wed, 18 Feb 2026 23:03:58 -0500 Subject: [PATCH] fix: allow dropdowns in Modes modal to be changed Currently if a user clicks either of the dropdowns (Mode or API Configuration) within the Modes modal, the modal will close, and their action will not save. This change prevents the close-on-click action from affecting the dropdowns which are rendered in a portal outside of the modal, so that the dropdowns work as intended. --- .changeset/hungry-socks-grin.md | 5 +++++ .../kilocode/rules/KiloRulesToggleModal.tsx | 20 +++++++++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) create mode 100644 .changeset/hungry-socks-grin.md diff --git a/.changeset/hungry-socks-grin.md b/.changeset/hungry-socks-grin.md new file mode 100644 index 00000000000..36cbad7dfeb --- /dev/null +++ b/.changeset/hungry-socks-grin.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +fix: allow dropdowns in Modes modal to be changed diff --git a/webview-ui/src/components/kilocode/rules/KiloRulesToggleModal.tsx b/webview-ui/src/components/kilocode/rules/KiloRulesToggleModal.tsx index 77968f4e3ab..b8fa0d7c1b7 100644 --- a/webview-ui/src/components/kilocode/rules/KiloRulesToggleModal.tsx +++ b/webview-ui/src/components/kilocode/rules/KiloRulesToggleModal.tsx @@ -1,5 +1,5 @@ import { useRef, useState, useEffect } from "react" -import { useWindowSize, useClickAway } from "react-use" +import { useWindowSize } from "react-use" import { useTranslation } from "react-i18next" import styled from "styled-components" @@ -30,9 +30,21 @@ const KiloRulesToggleModal: React.FC = () => { const [menuPosition, setMenuPosition] = useState(0) const [currentView, setCurrentView] = useState<"modes" | "mcp" | "rule" | "workflow" | "skills">("rule") - useClickAway(modalRef, () => { - setIsVisible(false) - }) + useEffect(() => { + const handler = (event: MouseEvent | TouchEvent) => { + const target = event.target as HTMLElement + if (modalRef.current?.contains(target)) return + // Ignore clicks on Radix portaled content (Select/Popover dropdowns) + if (target.closest("[data-radix-popper-content-wrapper]")) return + setIsVisible(false) + } + document.addEventListener("mousedown", handler) + document.addEventListener("touchstart", handler) + return () => { + document.removeEventListener("mousedown", handler) + document.removeEventListener("touchstart", handler) + } + }, []) useEffect(() => { if (isVisible && buttonRef.current) {