PrimeReact Dropdown按下方向键触发onChange事件问题求助

默认情况下，PrimeReact Dropdown在使用键盘箭头键浏览选项（仅高亮未确认选择）时不应触发onChange，若你的场景出现该问题，可通过以下方案解决：

方案一：自定义onChange过滤触发事件类型 #

通过判断事件触发源，仅在用户点击选项或按下回车键确认选择时，执行原field.onChange回调：

const handleDropdownChange = (e) => {
  const originalEvent = e.originalEvent;
  // 仅允许点击或回车触发的事件执行原回调
  if (originalEvent?.type === 'click' || (originalEvent?.type === 'keydown' && originalEvent.key === 'Enter')) {
    field.onChange(e);
  }
};

<Dropdown
  name="member"
  optionLabel="name"
  optionValue="_id"
  value={field.value}
  onChange={handleDropdownChange}
  options={assigneesList?.filter(assignees => assignees._id !== member)}
  itemTemplate={assgineesOptionTemplate}
  className="p-dropaassignees"
/>

方案二：区分临时高亮与确认选择 #

用状态存储键盘导航时的临时高亮值，仅在用户确认选择后同步到field.value：

import { useState } from 'react';

// 初始化临时值为当前field的value
const [tempSelectedValue, setTempSelectedValue] = useState(field.value);

// 处理选项高亮（键盘导航或hover触发）
const handleSelect = (e) => {
  setTempSelectedValue(e.value);
};

// 处理确认选择（点击或回车触发）
const handleConfirmChange = (e) => {
  field.onChange({ ...e, value: tempSelectedValue });
};

<Dropdown
  name="member"
  optionLabel="name"
  optionValue="_id"
  value={tempSelectedValue}
  onChange={handleConfirmChange}
  onSelect={handleSelect}
  options={assigneesList?.filter(assignees => assignees._id !== member)}
  itemTemplate={assgineesOptionTemplate}
  className="p-dropaassignees"
/>

补充说明 #

若为旧版本PrimeReact导致的异常行为，建议优先升级至最新稳定版，新版本对键盘交互逻辑做了更严谨的处理。

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