Deselected value list item still display as selected

OlivierLefevre — Fri, 21 Jul 2023 14:56:36 GMT

I've been trying to make use of value list in the code below.

The issue is that the focus rectangle still display around an item when it gets deselected.

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> <title>V1 - Workaround : Deselecting a 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="NOT Selected"></calcite-value-list-item> <calcite-value-list-item label="point 2" value="point_2" description="NOT Selected"></calcite-value-list-item> <calcite-value-list-item label="point 3" value="point_3" description="NOT Selected"></calcite-value-list-item> </calcite-value-list> </calcite-panel> </calcite-shell-panel> </calcite-shell> <script> "use strict"; const listNode = document.getElementById("point-list") // Cannot use the event listener below because nothing's fired when already-selected item is clicked //listNode.addEventListener("calciteListChange", onListClickHandler) 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 target = event.target const targetId = target.value if (currentSelectedListItem.is_same(targetId)) { console.log("already selected") target.selected = false; currentSelectedListItem.reset(); // Do some stuff on map // Test 1 (FAILS) //target.toggleSelected() // Test 2 (FAILS) //target.removeAttribute("selected") // Test 4 (FAILS) //Array.from(listNode.childNodes).forEach(item => item.selected = false) // Test 5 (FAILS) //const listItems = listNode.querySelectorAll("calcite-value-list-item") //listItems.forEach(item => item.selected = false) } else { console.log("new selection") // Do some stuff on map } // Debug test : updating the descriptions to show the selected state of each list item. for(let listItem of event.target.parentElement.children) { listItem.description = listItem.selected ? "Selected" : "NOT Selected"; } //console.log(event.target.parentElement.children) } </script> </body> </html>

Could you help me please ?

Re: Deselected value list item still display as selected

KittyHurley — Fri, 21 Jul 2023 21:51:02 GMT

Calcite aims to support accessibility, which includes focus states for all audiences, whether it be selecting via keyboard or mouse. As a result the focus state will be present even if the component's state changes to accommodate low vision and more users.

Of note, the Value List component is deprecated and it's end of life is approaching once full functionality is achieved in the updated List component. More information on the parity can be found in the GitHub epic.

A similar implementation can be achieved with List in the latest Calcite version, 1.4.3, where while focus remains on the List Item upon selection/de-selection, a selection is also toggled on/off to provide more context to users: https://codepen.io/geospatialem/pen/JjeBXwp.

There is also an enhancement request to modify the selection states in the near future with #7106.

topic Deselected value list item still display as selected in Calcite Design System Questions

Deselected value list item still display as selected

Re: Deselected value list item still display as selected