fluent UI 中的Combobox如何在option的上面加一个input

fluent UI 9 中的Combobox如何在它自带的input框下面,option的上面,再加一个用于search的input框

会出现一个问题,点击search input框,可以触发input的onClick事件,但是无法获取焦点,焦点还在select的下拉框中

这种情况是由于 Combobox 的默认行为或者事件冒泡导致的。

解决方法:

bash 复制代码
const inputRef = React.useRef<any>(null);
 <Combobox
        aria-labelledby={comboId}
        placeholder="Select an animal"
        open={isOpen}
        onOpenChange={(event, data) => {
          setIsOpen(data.open);
          console.log(data.open, isOpen, 'setIsOpen');
        }}
        {...props}
        onClick={() => setIsOpen(true)} // 点击 Combobox 保持下拉框打开
      >
        <Input
          contentBefore={<SearchRegular />}
          ref={inputRef}
          onClick={(ev) => {
            ev.stopPropagation();
            inputRef.current?.focus();
            setIsOpen(true); // 点击 Input 保持下拉框打开
            console.log(ev, 'Input clicked');
          }}
        />
        {options.map((option) => (
          <Option key={option} disabled={option === 'Ferret'}>
            {option}
          </Option>
        ))}
      </Combobox>

首先在input的唯一可以触发的onClick方法中取消默认冒泡行为,(此时onFocus,onChange事件都不会触发)

然后强制设置焦点,在 onClick 事件中,手动将焦点设置到 Input 元素上,通过ref,走到这一步会发现点击input之后,下拉框消失了,这时候就要用到Combobox的open属性,点击input后,设置open的值一直是打开状态。使用onOpenChange,监听当点击其他地方时的监听事件。

这样就可以输入了,其他操作也会很流畅。

可以在官网链接测试
https://stackblitz.com/edit/9jdz2a-yxlsnb?file=src%2Fexample.tsx

完整代码

bash 复制代码
import * as React from 'react';
import {
  Combobox,
  makeStyles,
  Option,
  useId,
  Input,
} from '@fluentui/react-components';
import { SearchRegular } from '@fluentui/react-icons';
import type { ComboboxProps } from '@fluentui/react-components';

const useStyles = makeStyles({
  root: {
    // Stack the label above the field with a gap
    display: 'grid',
    gridTemplateRows: 'repeat(1fr)',
    justifyItems: 'start',
    gap: '2px',
    maxWidth: '400px',
  },
});

export const Default = (props: Partial<ComboboxProps>) => {
  const comboId = useId('combo-default');
  const [isOpen, setIsOpen] = React.useState(false);
  const options = ['Cat', 'Dog', 'Ferret', 'Fish', 'Hamster', 'Snake'];
  const styles = useStyles();
  const inputRef = React.useRef<any>(null);

  return (
    <div className={styles.root}>
      <label id={comboId}>Best pet</label>
      <Combobox
        aria-labelledby={comboId}
        placeholder="Select an animal"
        open={isOpen}
        onOpenChange={(event, data) => {
          setIsOpen(data.open);
          console.log(data.open, isOpen, 'setIsOpen');
        }}
        {...props}
        onClick={() => setIsOpen(true)} // 点击 Combobox 保持下拉框打开
      >
        <Input
          contentBefore={<SearchRegular />}
          ref={inputRef}
          onClick={(ev) => {
            ev.stopPropagation();
            inputRef.current?.focus();
            setIsOpen(true); // 点击 Input 保持下拉框打开
            console.log(ev, 'Input clicked');
          }}
        />
        {options.map((option) => (
          <Option key={option} disabled={option === 'Ferret'}>
            {option}
          </Option>
        ))}
      </Combobox>
    </div>
  );
};
相关推荐
Dragonir10 分钟前
React+Three.js 实现 Apple 2025 热成像 logo
前端·javascript·html·three.js·页面特效
古一|1 小时前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda71 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
熊猫钓鱼>_>2 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
JYeontu2 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_2 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
Larry_Yanan3 小时前
QML学习笔记(四十三)QML与C++交互:上下文属性暴露
c++·笔记·qt·学习·ui·交互
写不来代码的草莓熊3 小时前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js
郝学胜-神的一滴4 小时前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
m0dw4 小时前
vue懒加载
前端·javascript·vue.js·typescript