Enable control over checkbox change events in a Calcite Card component

[ialixandroae]

Description

As a developer, I would like to use the CalciteCard React components with the checkboxes being visible, and to be able to capture and handle the event triggered by clicking the checkbox.

The Card component is being controlled by a passed down props type boolean, which will dictate whether the Card is selected or not (by using this props inside the selected prop). The checkboxes are visible by setting the selectable property to true.

Example of using the component

<CalciteCard
          key={keyId}
          selected={true}
          selectable={true}
          thumbnailPosition="inline-start"
          onCalciteCardSelect={() => this.foo(args)}
>

As demonstrated in the code example above, the Card should always be rendered as selected (with the outline/contour having, for example, the blue color), and with its checkbox being checked

If the user will perform a click event on the checkbox (which in current state is checked), this action will unselect the Card component and will check the checked checkbox. This action overwrites the selected={true}property set on the Card component.

As a developer I would like to be able to use event.preventDefault() or event.stopPropagation() on the onChange() event function, triggered by clicking the checkbox, and to be able to control the state of the Card component and the state of the checkbox (if it will be checked or not, despite the click event).

Story example:

• after clicking the already checked checkbox of a Card element, after the click is performed, I would like a Modal element to appear. A user confirmation is needed inside the Modal, before deciding if the performed click will uncheck the checkbox and unselect the Card element.

Usage in React:

• the React best practices recommend the option to use checkbox elements either in controller or uncontrolled modes (environments). Moreover, a local widget state could be used to control whether a checkbox is checked or unchecked.
• In the case of Card elements we would need a similar pattern to be available, and because both the Card and the checkbox are present together in the big UI component, and they need to be in sync, to be able to control both
• their state can be rendered via the passed props

Acceptance Criteria

The developer must have control over the state by being able to capture and handle the change or click events performed on the Card or on the checkbox. If the user story requires, the developer must be able to block the click event changing the state of the Card (selected or not) or the state of the checkbox (checked or unchecked), typically by stopping the propagation of the event (eg. using event.preventDefault())

Relevant Info

MDN Events: preventDefault() method https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Which Component

CalciteCard: https://developers.arcgis.com/calcite-design-system/components/card/

Example Use Case

<CalciteCard
          key={keyId}
          selected={true}
          selectable={true}
          thumbnailPosition="inline-start"
          onCalciteCardSelect={() => this.foo(args)}
>

Priority impact

p1 - need for current milestone

Esri team

ArcGIS GeoBIM

[macandcheese]

Everything above is totally valid but complicated by using an actual checkbox element inside our card.

If we just use an action or other element with appropriate roles styled to behave like a checkbox, users would only have to deal with the event coming from the card’s select event. That said, all the comments in the above issue still stand for other places with nested controls (Tile Select?) that developer users don’t have direct access to.

[ialixandroae]

Thanks for the feedback @macandcheese !

Yes, initially I was quite surprised to see that the selection behaviour is represented by both the Card's outline + the checkbox added inside it (top right side)

And especially registering an onClick() event directly on the Card to control the selection, things can rapidly get complicated by having another selection mechanism controlled by the checkbox..

This problem is a bit similar to another one with using a CalciteList + CalciteListItem, where selection property is set to single, and selectionAppeareance is set to icon. This, in my eyes, looks like a classic radio button experience.

The problem was, although the selection is set to single, one can unselect the selected ListItem by clicking it. In a radio button experience, this is impossible. The only way to change the selected radio button is to click another one, not the same one.

First click on the last item in the list

Second click on the same last item in the list

[macandcheese]

@ialixandroae - specific to the List screenshots, there is an open issue to add an additional “single-persist” mode, to bring it up to speed with other components like Accordion, Dropdown, Chip Group, and solve for the use case you shared above:

https://github.com/Esri/calcite-components/issues/6382

[macandcheese]

Related #7223

[macandcheese]

I think this would be covered by #7223 and the proposed change in event behavior to align with our other selectionMode components and remove the internal checkbox cc @geospatialem if we want to close this in favor of that.

@ialixandroae - the single-persist mode mentioned in this thread has been added 🎈

[geospatialem]

I think this would be covered by https://github.com/Esri/calcite-design-system/issues/7223 and the proposed change in event behavior to align with our other selectionMode components and remove the internal checkbox cc @geospatialem if we want to close this in favor of that.

Closing in favor of the proposed card-group component in https://github.com/Esri/calcite-design-system/issues/7223.

@ialixandroae - the single-persist mode mentioned in this thread has been added 🎈

Codepen sample showing the list's selectionMode of "single-persist": https://codepen.io/geospatialem/pen/NWeBWJe