From 730e4064226d948bc127f1d28c44e62aecb82a5c Mon Sep 17 00:00:00 2001
From: Nathan Richards <nathan@li.finance>
Date: Fri, 24 Nov 2023 14:55:18 +0100
Subject: [PATCH] refactor: change focus state in Slippage controls

---
 .../SlippageSettings/SlippageSettings.tsx     | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx
index 26d350bea..e415c846d 100644
--- a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx
+++ b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx
@@ -25,9 +25,7 @@ export const SlippageSettings: React.FC = () => {
   const { slippage } = useSettings(['slippage']);
   const setValue = useSettingsStore((state) => state.setValue);
   const defaultValue = useRef(slippage);
-
-  const [customFocused, setCustomFocused] = useState(false);
-  const [defaultFocused, setDefaultFocused] = useState(false);
+  const [focused, setFocused] = useState('');
 
   const handleDefaultClick = () => {
     setValue('slippage', formatSlippage(slippageDefault, defaultValue.current));
@@ -61,23 +59,31 @@ export const SlippageSettings: React.FC = () => {
       <Box mt={1.5}>
         <SettingsFieldSet>
           <SlippageDefaultButton
-            selected={slippageDefault === slippage && !customFocused}
-            onFocus={() => setDefaultFocused(true)}
-            onBlur={() => setDefaultFocused(false)}
+            selected={slippageDefault === slippage && focused !== 'input'}
+            onFocus={() => {
+              setFocused('button');
+            }}
+            onBlur={() => {
+              setFocused('');
+            }}
             onClick={handleDefaultClick}
             focusRipple
           >
             0.5
           </SlippageDefaultButton>
           <SlippageCustomInput
-            selected={slippageDefault !== slippage && !defaultFocused}
-            placeholder={customFocused ? '' : t('settings.custom')}
+            selected={slippageDefault !== slippage && focused !== 'button'}
+            placeholder={focused === 'input' ? '' : t('settings.custom')}
             inputProps={{
               inputMode: 'decimal',
             }}
             onChange={handleInputUpdate}
-            onFocus={() => setCustomFocused(true)}
-            onBlur={() => setCustomFocused(false)}
+            onFocus={() => {
+              setFocused('input');
+            }}
+            onBlur={() => {
+              setFocused('');
+            }}
             value={customInputValue}
             autoComplete="off"
           />