如何取消已选中的Web组件列表项？Calcite组件问题求助

问题核心 #

使用Calcite的calcite-value-list组件时，点击已选中的列表项无法取消选中状态，尝试toggleSelected()、移除selected属性等方法均无效，且calciteListChange事件在点击已选中项时不会触发。

解决方案 #

问题出在两个关键点：一是点击事件的target可能不是calcite-value-list-item本身（而是内部的文本元素），二是组件默认的单选逻辑会覆盖手动修改的选中状态。以下是修复后的代码：

修改后的JavaScript代码

"use strict";

const listNode = document.getElementById("point-list");

listNode.addEventListener("click", onListClickHandler);

const currentSelectedListItem = (function(){
  let currentItemValue;
  return {
    is_same: function(selectedItemValue) {
      if (currentItemValue !== selectedItemValue) {
        currentItemValue = selectedItemValue;
        return false;
      } else {
        return true;
      }
    },
    reset: function() {
      currentItemValue = null;
    }
  }
})();

function onListClickHandler(event) {
  // 找到真正的列表项元素，避免点击内部子元素时出错
  const targetItem = event.target.closest("calcite-value-list-item");
  if (!targetItem) return;
  
  const targetId = targetItem.value;

  if (currentSelectedListItem.is_same(targetId)) {
    console.log("already selected");
    // 阻止组件默认的选中行为，避免覆盖手动取消操作
    event.preventDefault();
    // 切换选中状态
    targetItem.toggleSelected();
    // 重置当前选中值
    currentSelectedListItem.reset();
  } else {
    console.log("new selection");
    // 执行你的业务逻辑
  }
}

关键修改说明

• 正确获取列表项元素：使用closest("calcite-value-list-item")确保无论点击列表项内的哪个子元素，都能拿到对应的calcite-value-list-item实例。
• 阻止默认行为：点击已选中项时，调用event.preventDefault()阻止组件默认的单选逻辑，避免组件自动重新选中该项。
• 重置选中状态记录：取消选中后调用reset()更新currentSelectedListItem的状态，保证下次点击逻辑正确。

HTML部分无需修改

保持原有的Calcite组件结构即可：

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>

    <title>deselect already-selected value list item</title>

    <script src="https://js.arcgis.com/4.25/"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css"/>

    <script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href=https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.css />
  </head>

  <body>
    <calcite-shell class="calcite-tutorial">
      <calcite-shell-panel slot="panel-end">
        <calcite-panel heading="Point list">
          <calcite-value-list id="point-list">
            <calcite-value-list-item label="point 1" value="point_1" description="some description"></calcite-value-list-item>
            <calcite-value-list-item label="point 2" value="point_2" description="some description"></calcite-value-list-item>
            <calcite-value-list-item label="point 3" value="point_3" description="some description"></calcite-value-list-item>
          </calcite-value-list>
        </calcite-panel>
      </calcite-shell-panel>
    </calcite-shell>
  </body>
</html>

补充说明 #

如果需要更灵活的多选/取消选中逻辑，可以给calcite-value-list添加selection-mode="multiple"属性，但这会改变组件的默认单选行为，根据你的业务场景选择即可。

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