React中popover内input的autoFocus引发页面滚动的解决方法咨询

这个问题的核心原因是：当你用Tippy、Floating UI这类库把Popover渲染在滚动容器外部（比如直接挂载到body上）时，内部input的autoFocus会触发浏览器的默认行为——自动滚动页面到聚焦元素的位置，而浏览器此时识别的是整个页面的滚动上下文，而非内部的滚动容器。

下面是几种靠谱的解决方法：

1. 手动聚焦并禁用滚动行为 #

直接去掉input的autoFocus属性，改用手动调用focus()方法并传入preventScroll: true参数，阻止浏览器的默认滚动。

import { useRef, useEffect, useState } from 'react';
import Tippy from '@tippyjs/react';

const ScrollableComponent = () => {
  const inputRef = useRef(null);
  const [showPopover, setShowPopover] = useState(false);

  useEffect(() => {
    if (showPopover && inputRef.current) {
      // 手动聚焦，阻止默认滚动
      inputRef.current.focus({ preventScroll: true });
    }
  }, [showPopover]);

  return (
    <div className="scroll-container" style={{ height: '300px', overflow: 'auto' }}>
      {/* 滚动区域内容 */}
      <Tippy
        content={
          <div>
            <input ref={inputRef} type="text" placeholder="输入内容" />
          </div>
        }
        visible={showPopover}
      >
        <button onClick={() => setShowPopover(true)}>打开Popover</button>
      </Tippy>
    </div>
  );
};

2. 将Popover挂载到滚动容器内部 #

让Popover的DOM节点直接放在滚动容器里面，而不是body上。这样浏览器聚焦时只会滚动内部容器，不会影响整个页面。

针对Tippy的配置： #

用appendTo选项指定滚动容器作为挂载目标：

import { useRef, useState } from 'react';
import Tippy from '@tippyjs/react';

const ScrollableComponent = () => {
  const scrollContainerRef = useRef(null);
  const [showPopover, setShowPopover] = useState(false);

  return (
    <div ref={scrollContainerRef} className="scroll-container" style={{ height: '300px', overflow: 'auto' }}>
      {/* 滚动区域内容 */}
      <Tippy
        content={<input autoFocus type="text" placeholder="输入内容" />}
        visible={showPopover}
        appendTo={() => scrollContainerRef.current} // 挂载到滚动容器内
      >
        <button onClick={() => setShowPopover(true)}>打开Popover</button>
      </Tippy>
    </div>
  );
};

针对Floating UI的配置： #

使用strategy: 'absolute'并将浮动元素放在滚动容器内部，或者通过FloatingPortal指定容器：

import { useRef, useState } from 'react';
import { FloatingPortal, FloatingContent } from '@floating-ui/react';

const ScrollableComponent = () => {
  const scrollContainerRef = useRef(null);
  const [showPopover, setShowPopover] = useState(false);

  return (
    <div ref={scrollContainerRef} className="scroll-container" style={{ height: '300px', overflow: 'auto', position: 'relative' }}>
      {/* 滚动区域内容 */}
      {showPopover && (
        <FloatingPortal container={scrollContainerRef.current}>
          <FloatingContent>
            <input autoFocus type="text" placeholder="输入内容" />
          </FloatingContent>
        </FloatingPortal>
      )}
      <button onClick={() => setShowPopover(true)}>打开Popover</button>
    </div>
  );
};

3. 延迟聚焦（兜底方案） #

如果前两种方法因为库的限制没法用，可以尝试延迟聚焦，让Popover完全渲染到正确位置后再执行聚焦操作，避免浏览器误判元素位置：

import { useRef, useEffect, useState } from 'react';
import Tippy from '@tippyjs/react';

const ScrollableComponent = () => {
  const inputRef = useRef(null);
  const [showPopover, setShowPopover] = useState(false);

  useEffect(() => {
    if (showPopover && inputRef.current) {
      const timer = setTimeout(() => {
        inputRef.current.focus({ preventScroll: true });
      }, 100); // 短延迟，根据实际渲染速度调整
      return () => clearTimeout(timer);
    }
  }, [showPopover]);

  return (
    <div className="scroll-container" style={{ height: '300px', overflow: 'auto' }}>
      {/* 滚动区域内容 */}
      <Tippy
        content={
          <div>
            <input ref={inputRef} type="text" placeholder="输入内容" />
          </div>
        }
        visible={showPopover}
      >
        <button onClick={() => setShowPopover(true)}>打开Popover</button>
      </Tippy>
    </div>
  );
};

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