Android端ReactJS应用TextField光标跳转问题求助

问题场景 #

基于ReactJS开发的Android地图应用，使用MUI Drawer组件实现底部可拖动菜单，菜单内包含TextField。操作流程：

• 将菜单拖至屏幕中部，点击TextField唤起Android虚拟键盘；
• 保持TextField焦点（键盘显示），继续拖动菜单至虚拟键盘下方，导致TextField被键盘遮挡；
• 此时TextField光标会跳至文本开头，后续输入的字符会添加在原有内容之前。

已知信息：

• 使用Capacitor 6；
• 菜单及TextField在拖动后仍处于挂载状态，onFocus/onBlur方法未触发；
• 已测试AndroidManifest.xml中android:windowSoftInputMode的unspecified、pan、resize等配置，问题未解决；
• 观察Waze应用发现，输入时可拖动菜单会变为不可拖动状态。

原因分析 #

1. Android原生输入系统的隐式处理：当TextField被虚拟键盘遮挡时，Android系统会认为输入控件暂时处于不可视区域，可能触发原生层面的光标状态重置，即使React组件未卸载、onBlur未触发，原生输入框的光标位置还是会被干扰。
2. JS拖动与原生布局的同步冲突：MUI Drawer的拖动是通过JS控制元素位置，而Android虚拟键盘会改变窗口布局，两者交互时WebView无法及时同步输入框的状态，导致光标管理逻辑异常。
3. Capacitor WebView的交互延迟：WebView在处理输入焦点和视图位置变化时存在同步延迟，当拖动导致输入框移出可视区域，WebView未能正确维护输入框的光标状态。

修复方案 #

方案1：拖动时临时失焦输入框 #

监听Drawer的拖动开始/结束事件，主动控制TextField的焦点状态，避免拖动过程中原生系统干扰光标：

import { useState, useRef } from 'react';
import { Drawer, TextField } from '@mui/material';

const DraggableInputDrawer = () => {
  const [isDragging, setIsDragging] = useState(false);
  const [wasInputFocused, setWasInputFocused] = useState(false);
  const inputRef = useRef(null);

  const handleDragStart = () => {
    setIsDragging(true);
    // 记录当前输入框是否聚焦，然后失焦
    if (document.activeElement === inputRef.current) {
      setWasInputFocused(true);
      inputRef.current.blur();
    }
  };

  const handleDragEnd = () => {
    setIsDragging(false);
    // 拖动结束后恢复焦点（如果之前是聚焦状态）
    if (wasInputFocused) {
      inputRef.current.focus();
      setWasInputFocused(false);
    }
  };

  return (
    <Drawer
      variant="persistent"
      anchor="bottom"
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      // 其他Drawer配置（如位置控制逻辑）
    >
      <TextField ref={inputRef} label="搜索地点" />
    </Drawer>
  );
};

方案2：限制拖动范围，避免输入框被遮挡 #

通过Capacitor的Keyboard API获取键盘高度，设置Drawer的最大拖动上限，确保TextField始终处于键盘上方的可视区域：

import { useState, useEffect } from 'react';
import { Drawer, TextField } from '@mui/material';
import { Keyboard } from '@capacitor/keyboard';

const DraggableInputDrawer = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const [maxDrawerTop, setMaxDrawerTop] = useState(window.innerHeight);

  useEffect(() => {
    const initKeyboardHeight = async () => {
      const heightRes = await Keyboard.getHeight();
      setKeyboardHeight(heightRes.value);
      // 预留80px间距，避免输入框紧贴键盘
      setMaxDrawerTop(window.innerHeight - heightRes.value - 80);
    };

    initKeyboardHeight();

    // 监听键盘显示/隐藏事件，动态更新最大拖动位置
    const showListener = Keyboard.addListener('keyboardWillShow', (info) => {
      setKeyboardHeight(info.keyboardHeight);
      setMaxDrawerTop(window.innerHeight - info.keyboardHeight - 80);
    });

    const hideListener = Keyboard.addListener('keyboardWillHide', () => {
      setKeyboardHeight(0);
      setMaxDrawerTop(window.innerHeight);
    });

    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  // 在拖动逻辑中限制Drawer的top不超过maxDrawerTop
  const handleDrawerDrag = (newTop) => {
    const validTop = Math.min(newTop, maxDrawerTop);
    // 这里更新Drawer的位置（根据你的拖动实现逻辑调整）
  };

  return (
    <Drawer
      variant="persistent"
      anchor="bottom"
      onDrag={handleDrawerDrag}
      // 其他Drawer配置
    >
      <TextField label="搜索地点" />
    </Drawer>
  );
};

方案3：借鉴Waze的UX设计，输入时禁用拖动 #

当TextField获得焦点时，禁用Drawer的拖动功能，避免出现异常交互场景，这也是主流地图应用的常见设计：

import { useState } from 'react';
import { Drawer, TextField } from '@mui/material';

const DraggableInputDrawer = () => {
  const [inputIsFocused, setInputIsFocused] = useState(false);

  // 根据MUI Drawer的API调整禁用拖动的方式，若没有直接属性，可通过阻止拖动事件实现
  const preventDrag = (e) => {
    if (inputIsFocused) e.stopPropagation();
  };

  return (
    <Drawer
      variant="persistent"
      anchor="bottom"
      onMouseDown={preventDrag}
      onTouchStart={preventDrag}
      // 其他Drawer配置
    >
      <TextField
        label="搜索地点"
        onFocus={() => setInputIsFocused(true)}
        onBlur={() => setInputIsFocused(false)}
      />
    </Drawer>
  );
};

关于需求可行性与UX的疑问 #

你的需求并非完全无法实现，但确实存在原生与Web交互的底层冲突，需要额外的状态控制来规避异常。从UX角度看，用户正在输入时允许拖动菜单导致输入框被遮挡，本身不符合用户预期——输入时用户通常希望输入框保持可见，Waze的设计正是为了避免这种混乱场景，提升整体体验。如果坚持要实现原需求，优先采用方案1或2，并在多款Android设备上做好边界测试；若追求更流畅的用户体验，方案3的设计会更稳妥。

内容的提问来源于stack exchange，提问作者vincent