From 0e341d786311197da8b4de7726aa451bfa2109cb Mon Sep 17 00:00:00 2001
From: Andrew Varga <grizzly33@gmail.com>
Date: Wed, 14 May 2025 20:16:23 +0200
Subject: [PATCH] #6202 Save input value before closing settings dialogue
 (#6931)

* call blur on current input before closing settings dialogue to save value

* separate esc handling is not needed

* lint
---
 src/routes/Settings.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index cc400b970..db3d39781 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -1,6 +1,5 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useEffect, useRef } from 'react'
-import { useHotkeys } from 'react-hotkeys-hook'
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
 
 import { CustomIcon } from '@src/components/CustomIcon'
@@ -10,14 +9,19 @@ import { KeybindingsSectionsList } from '@src/components/Settings/KeybindingsSec
 import { SettingsSearchBar } from '@src/components/Settings/SettingsSearchBar'
 import { SettingsSectionsList } from '@src/components/Settings/SettingsSectionsList'
 import { SettingsTabs } from '@src/components/Settings/SettingsTabs'
-import { useDotDotSlash } from '@src/hooks/useDotDotSlash'
 import { PATHS } from '@src/lib/paths'
 import type { SettingsLevel } from '@src/lib/settings/settingsTypes'
 
 export const Settings = () => {
   const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
-  const close = () => navigate(location.pathname.replace(PATHS.SETTINGS, ''))
+  const close = () => {
+    // This makes sure input texts are saved before closing the dialog (eg. default project name).
+    if (document.activeElement instanceof HTMLInputElement) {
+      document.activeElement.blur()
+    }
+    navigate(location.pathname.replace(PATHS.SETTINGS, ''))
+  }
   const location = useLocation()
   const isFileSettings = location.pathname.includes(PATHS.FILE)
   const searchParamTab =
@@ -25,8 +29,6 @@ export const Settings = () => {
     (isFileSettings ? 'project' : 'user')
 
   const scrollRef = useRef<HTMLDivElement>(null)
-  const dotDotSlash = useDotDotSlash()
-  useHotkeys('esc', () => navigate(dotDotSlash()))
 
   // Scroll to the hash on load if it exists
   useEffect(() => {