Community
Select to view content in your preferred language

Deselected value list item still display as selected

490
1
07-21-2023 04:20 AM
Labels (1)
Labels
OlivierLefevre
by
Occasional Contributor
‎07-21-2023 04:20 AM

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 ?

1 Reply
KittyHurley
by Esri Contributor
Esri Contributor
‎07-21-2023 02:18 PM

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.

0 Kudos