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>
  );
};
相关推荐
前端君1 小时前
实现最大异步并发执行队列
javascript
知识分享小能手2 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队3 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军3 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy4 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿4 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL4 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉4 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~4 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng4 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript