Tearsheet打开时无法聚焦内部ComboBox问题求助

问题原因 #

Carbon的ComboBox是复合组件，对外暴露的根节点通常是不可聚焦的<div>，真正可接收焦点的是组件内部的输入框元素（带有[data-combobox-input]属性或自动生成的{id}-input格式ID）。而Tearsheet的selectorPrimaryFocus属性如果直接指向ComboBox的根ID，会因为选中的元素不可聚焦而失效；普通<input>能正常工作是因为它本身就是可聚焦的原生元素。

解决方案 #

方案1：精准定位ComboBox内部的可聚焦元素 #

直接使用CSS选择器指向ComboBox内部的输入框，替换原有的selectorPrimaryFocus值：

import { ComboBox } from "@carbon/react";
import { Tearsheet } from "@carbon/ibm-products";

// 渲染部分
<Tearsheet 
  open={this.props.isOpen} 
  selectorPrimaryFocus="#selectRecordType [data-combobox-input]"
>
  <ComboBox id="selectRecordType" />
</Tearsheet>

原理：[data-combobox-input]是Carbon ComboBox内部输入框的标准属性，通过组合ID和属性选择器，能精准定位到可聚焦的元素。

方案2：手动调用聚焦方法 #

通过React Ref获取ComboBox实例，在Tearsheet打开的回调中手动触发输入框的聚焦：

import { ComboBox } from "@carbon/react";
import { Tearsheet } from "@carbon/ibm-products";

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.comboBoxRef = React.createRef();
  }

  handleTearsheetOpen = () => {
    if (this.comboBoxRef.current) {
      // 利用Carbon ComboBox提供的方法获取内部输入框
      const inputElement = this.comboBoxRef.current.getInputElement();
      inputElement?.focus();
    }
  };

  render() {
    return (
      <Tearsheet 
        open={this.props.isOpen} 
        onOpen={this.handleTearsheetOpen}
      >
        <ComboBox id="selectRecordType" ref={this.comboBoxRef} />
      </Tearsheet>
    );
  }
}

原理：通过Ref拿到ComboBox的实例，调用组件内置的getInputElement()方法获取真正的输入框DOM节点，再手动调用focus()方法完成聚焦。

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