bagasbanuna
90bc8ae343
- Migrate ScreenJobCreate.tsx to NewWrapper_V2
- Migrate ScreenJobEdit.tsx to NewWrapper_V2
- Add NewWrapper_V2 component with auto-scroll keyboard handling
- Add useKeyboardForm hook for keyboard management
- Add FormWrapper component for forms
- Create ScreenJobEdit.tsx from edit route (separation of concerns)
- Add documentation for keyboard implementation
- Add TASK-004 migration plan
- Fix: Footer width 100% with safe positioning
- Fix: Content padding bottom 80px for navigation bar
- Fix: Auto-scroll to focused input
- Fix: No white area when keyboard close
- Fix: Footer not raised after keyboard close
Phase 1 completed: Job screens migrated
### No Issue
149 lines
3.5 KiB
Markdown
149 lines
3.5 KiB
Markdown
# 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:
|
|
```typescript
|
|
<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:
|
|
```typescript
|
|
<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
|
|
```typescript
|
|
// Before
|
|
<View style={{ position: "absolute", bottom: 0 }}>
|
|
{footer}
|
|
</View>
|
|
|
|
// After
|
|
<SafeAreaView>
|
|
{footer}
|
|
</SafeAreaView>
|
|
```
|
|
|
|
### Fix 2: Use flex: 1 instead of flex: 0
|
|
```typescript
|
|
// Before
|
|
<View style={{ flex: 0 }}>
|
|
<ScrollView />
|
|
</View>
|
|
|
|
// After
|
|
<View style={{ flex: 1 }}>
|
|
<ScrollView />
|
|
</View>
|
|
```
|
|
|
|
### Fix 3: Use KeyboardAwareScrollView
|
|
```typescript
|
|
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
|
|
|
|
<KeyboardAwareScrollView>
|
|
{content}
|
|
</KeyboardAwareScrollView>
|
|
```
|
|
|
|
### Fix 4: Manual keyboard handling
|
|
```typescript
|
|
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
|