From fbac80e2535581dff840ead1d3e236f26f0dab0d Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Fri, 29 May 2026 09:14:18 -0700
Subject: [PATCH] Remove mobile modal reset effects (#3223)

---
 mobile/src/components/CustomKeyModal.tsx | 10 +++++++---
 mobile/src/components/TextInputModal.tsx | 17 +++++++++++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/mobile/src/components/CustomKeyModal.tsx b/mobile/src/components/CustomKeyModal.tsx
index e364a963a53..eb6b38d89ba 100644
--- a/mobile/src/components/CustomKeyModal.tsx
+++ b/mobile/src/components/CustomKeyModal.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { View, Text, Pressable, TextInput, StyleSheet, Switch } from 'react-native'
 import { ChevronLeft } from 'lucide-react-native'
 import AsyncStorage from '@react-native-async-storage/async-storage'
@@ -83,8 +83,12 @@ export function CustomKeyModal({ visible, onClose, onKeysChanged }: Props) {
   const [macroLabel, setMacroLabel] = useState('')
   const [macroText, setMacroText] = useState('')
   const [macroEnter, setMacroEnter] = useState(true)
+  const [previousVisible, setPreviousVisible] = useState(visible)
 
-  useEffect(() => {
+  // Why: reset before the opening commit so the drawer does not flash the last
+  // custom-key draft; keep close state unchanged for the slide-out animation.
+  if (visible !== previousVisible) {
+    setPreviousVisible(visible)
     if (visible) {
       setStep('choose-type')
       setShortcutKey('c')
@@ -93,7 +97,7 @@ export function CustomKeyModal({ visible, onClose, onKeysChanged }: Props) {
       setMacroText('')
       setMacroEnter(true)
     }
-  }, [visible])
+  }
 
   const addKey = useCallback(
     async (key: Omit<CustomKey, 'id'>) => {
diff --git a/mobile/src/components/TextInputModal.tsx b/mobile/src/components/TextInputModal.tsx
index 0b24e19dd8d..717b14d8e67 100644
--- a/mobile/src/components/TextInputModal.tsx
+++ b/mobile/src/components/TextInputModal.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import {
   View,
   Text,
@@ -39,10 +39,19 @@ export function TextInputModal({
   onCancel
 }: Props) {
   const [value, setValue] = useState(defaultValue)
+  const [previousVisible, setPreviousVisible] = useState(visible)
+  const [previousDefaultValue, setPreviousDefaultValue] = useState(defaultValue)
 
-  useEffect(() => {
-    if (visible) setValue(defaultValue)
-  }, [visible, defaultValue])
+  // Why: reset before the opening commit so the drawer never paints the
+  // previous modal value while preserving the existing close animation state.
+  const shouldResetValue = visible && (!previousVisible || defaultValue !== previousDefaultValue)
+  if (visible !== previousVisible || shouldResetValue) {
+    setPreviousVisible(visible)
+    if (shouldResetValue) {
+      setPreviousDefaultValue(defaultValue)
+      setValue(defaultValue)
+    }
+  }
 
   function handleSubmit() {
     const trimmed = value.trim()