为何Chakra UI Select选占位符会触发Modal？如何规避？

选择占位符时调用onChange是正常行为吗？ #

是的，这属于正常行为。当你手动添加value=""的<option>作为占位符时，选中该选项会触发Select的onChange事件——因为这本质上是一次有效的值变更（从之前选中的非空值切换为空值），Chakra UI会遵循标准表单组件的行为逻辑触发事件。

如何避免选择占位符时打开Modal？ #

方案1：使用Select自带的placeholder属性（推荐） #

Chakra UI的Select组件原生提供了placeholder属性，无需手动添加空选项。这种方式下，占位符仅作为提示文本存在，不会成为可选中的选项，自然不会触发onChange事件。

示例代码：

<Select placeholder="请选择" onChange={handleChange}>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
</Select>

方案2：保留手动占位符，添加值判断（你已尝试的方式） #

如果必须保留手动添加的空选项，在onChange中判断值是否为空是合理且常用的解决方案，无需刻意规避：

handleChange = (event) => {
  const selectedValue = event.target.value;
  setSelected(selectedValue);
  if (selectedValue) { // 仅当值非空时打开Modal
    onOpen();
  }
};

方案3：给占位符选项添加disabled属性 #

如果不想让用户选中占位符，可以给该选项添加disabled属性，用户无法选择它，也就不会触发对应的onChange：

<option value="" disabled>请选择</option>

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