IndependentPanel: Prevent delete bubbling and harden search input

- Stop click/keyboard bubbling from utility group to avoid triggering parent button when interacting with delete controls; add tabIndex=-1 and preventDefault on Enter/Space for accessibility - Remount content on session switch via key to avoid stale scroll/state - Sanitize and clamp search input (strip control chars, max 500) to improve robustness and UX - When deleting the active session, pick the next valid sessionId or clear selection safely - Add focus outline fallback color for the search field to maintain contrast across themes - Guard DeleteButton confirm against rapid re-entry and ensure UI exits confirm state via try/finally Notes: - Did not change config persistence flow (setUserConfig), as it stores partial keys without overwriting others - Did not bound per-session scan size; will revisit only if real perf issues arise

Author: PeterDaveHello

src/components/DeleteButton/index.jsx

@@ -13,6 +13,7 @@ function DeleteButton({ onConfirm, size, text }) {
  const { t } = useTranslation()
  const [waitConfirm, setWaitConfirm] = useState(false)
  const confirmRef = useRef(null)
+ const confirmingRef = useRef(false)
 
  useEffect(() => {
  if (waitConfirm) confirmRef.current.focus()
@@ -35,11 +36,17 @@ function DeleteButton({ onConfirm, size, text }) {
  onBlur={() => {
  setWaitConfirm(false)
  }}
- onClick={(e) => {
+ onClick={async (e) => {
+ if (confirmingRef.current) return
  e.preventDefault()
  e.stopPropagation()
- setWaitConfirm(false)
- onConfirm()
+ confirmingRef.current = true
+ try {
+ await onConfirm()
+ } finally {
+ confirmingRef.current = false
+ setWaitConfirm(false)
+ }
  }}
  >
  {t('Confirm')}

src/pages/IndependentPanel/App.jsx

@@ -116,7 +116,17 @@ function App() {
  await setSessionIdSafe(sessions[0].sessionId)
  }
 
- const handleSearchChange = (e) => setSearchQuery(e.target.value)
+ const handleSearchChange = (e) => {
+ const raw = e?.target?.value ?? ''
+ const cleaned = Array.from(raw)
+ .filter((ch) => {
+ const code = ch.charCodeAt(0)
+ return code >= 32 || code === 9 || code === 10 || code === 13
+ })
+ .join('')
+ .slice(0, 500)
+ setSearchQuery(cleaned)
+ }
 
  // Debounce search input for performance
  useEffect(() => {
@@ -234,11 +244,15 @@ function App() {
  {session.sessionName}
  <span
  className="gpt-util-group"
+ tabIndex={-1}
  onClick={(e) => {
  e.stopPropagation()
  }}
  onKeyDown={(e) => {
- if (e.key === 'Enter' || e.key === ' ') e.stopPropagation()
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ e.stopPropagation()
+ }
  }}
  >
  <DeleteButton
@@ -255,7 +269,13 @@ function App() {
  }
  // Only change active session if the deleted one was active
  if (sessionId === deletedId) {
- await setSessionIdSafe(updatedSessions[0].sessionId)
+ const next = updatedSessions.find((s) => s && s.sessionId)
+ if (next) {
+ await setSessionIdSafe(next.sessionId)
+ } else {
+ setSessionId(null)
+ setCurrentSession(null)
+ }
  }
  }}
  />
@@ -278,7 +298,11 @@ function App() {
  </div>
  <div className="chat-content">
  {renderContent && currentSession && currentSession.conversationRecords && (
- <div className="chatgptbox-container" style={{ height: '100%' }}>
+ <div
+ key={currentSession.sessionId}
+ className="chatgptbox-container"
+ style={{ height: '100%' }}
+ >
  <ConversationCard
  session={currentSession}
  notClampSize={true}

src/pages/IndependentPanel/styles.scss

@@ -120,7 +120,7 @@
  }
 
  .search-input:focus-visible {
- outline: 2px solid var(--font-active-color);
+ outline: 2px solid var(--font-active-color, #3b82f6);
  outline-offset: 2px;
  }