hipmi-mobile/docs/KEYBOARD-BUG-TEST.md

Keyboard Bug Investigation

🐛 Problem

Footer terangkat dan muncul area putih di bawah saat keyboard ditutup setelah input ke TextInput.

📋 Test Cases

Test 1: Minimal Wrapper

File: test-keyboard-bug.tsx

Wrapper yang sangat sederhana:

<KeyboardAvoidingView behavior="height">
  <ScrollView>
    <TextInput />
  </ScrollView>
  <SafeAreaView>Footer</SafeAreaView>
</KeyboardAvoidingView>

Expected: Footer tetap di bawah Actual: ? (To be tested)

Test 2: Original NewWrapper

File: components/_ShareComponent/NewWrapper.tsx

Wrapper yang digunakan di production:

<KeyboardAvoidingView behavior="height">
  <View flex={0}>
    <ScrollView>
      {content}
    </ScrollView>
  </View>
  <View position="absolute">Footer</View>
</KeyboardAvoidingView>

Expected: Footer tetap di bawah Actual: Footer terangkat, ada putih di bawah

🔍 Possible Causes

1. KeyboardAvoidingView Behavior

• Android: behavior="height" mengurangi height view saat keyboard muncul
• Issue: Saat keyboard close, height tidak kembali ke semula

2. View Wrapper dengan flex: 0

• NewWrapper menggunakan <View style={{ flex: 0 }}>
• Ini membuat ScrollView tidak expand dengan benar
• Fix: Coba <View style={{ flex: 1 }}>

3. Footer dengan position: absolute

• Footer "melayang" di atas konten
• Tidak ikut terdorong saat keyboard muncul
• Saat keyboard close, footer kembali tapi layout sudah berubah

4. SafeAreaView Insets

• Safe area insets berubah saat keyboard muncul
• Footer tidak handle insets dengan benar

🧪 Test Scenarios

1. Test Input Focus

   • Tap Input 1 → Keyboard muncul
   • Footer tetap di bawah?

2. Test Input Blur

   • Tap Input 1 → Keyboard muncul
   • Tap outside → Keyboard close
   • Footer kembali ke posisi?
   • Ada putih di bawah?

3. Test Multiple Inputs

   • Tap Input 1 → Input 2 → Input 3
   • Keyboard pindah dengan smooth
   • Footer tetap di bawah?

4. Test Scroll After Close

   • Input → Close keyboard
   • Scroll ke bawah
   • Footer terlihat?
   • Ada putih di bawah?

🔧 Potential Fixes

Fix 1: Remove position: absolute

// Before
<View style={{ position: "absolute", bottom: 0 }}>
  {footer}
</View>

// After
<SafeAreaView>
  {footer}
</SafeAreaView>

Fix 2: Use flex: 1 instead of flex: 0

// Before
<View style={{ flex: 0 }}>
  <ScrollView />
</View>

// After
<View style={{ flex: 1 }}>
  <ScrollView />
</View>

Fix 3: Use KeyboardAwareScrollView

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

<KeyboardAwareScrollView>
  {content}
</KeyboardAwareScrollView>

Fix 4: Manual keyboard handling

const [keyboardVisible, setKeyboardVisible] = useState(false);

useEffect(() => {
  const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
  const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
  return () => { show.remove(); hide.remove(); }
}, []);

📝 Test Results

Test	Platform	Result	Notes
Test 1 (Minimal)	Android	?	TBD
Test 1 (Minimal)	iOS	?	TBD
Test 2 (Original)	Android	❌ Bug	Footer terangkat
Test 2 (Original)	iOS	?	TBD

🎯 Next Steps

1. Test dengan TestWrapper (minimal wrapper)
2. Identifikasi apakah bug dari wrapper atau React Native
3. Apply fix yang sesuai
4. Test di semua screen