Make calcite-list-item non-selectable without visual changes

[fdeters]

Hello!

I'm building a custom layer list UI in a web map. I like the functionality of the `calcite-list-item` component to serve as individual layer items, with one exception: I want to remove the interactivity of the body of the List Item without setting the `disabled` property.

Here's a screenshot demonstrating the problem (my cursor is hovering over the center of the highlighted List Item): 

In my implementation, I don't actually want any interactivity on `calcite-list-item`. Instead, I listen for interactions with the actions at the ends of the item (the empty checkbox and the transparency icon). Ideally, I'd be able to set a property of `calcite-list-item` that makes it non-interactive without the aggressive styling changes of the `disabled` property. This dream property of mine would remove hover/focus effects on the item body, and remove the `cursor: pointer;` CSS property on the item's body.

Is there a way to do this that I'm missing? Or an alternative approach using something other than `calcite-list-item`?

[KittyHurley]

Thanks for posting in Calcite's Community, a global community of Esri users where you can find solutions, share ideas, and collaborate with others.

This is a great topic to submit a case to Esri Support, where you can report bugs in released versions of Calcite and request enhancements. Submitted cases help you troubleshoot issues, provide tracking progress of bugs, and help build cases to help prioritize enhancements requests.

Learn more about submitting cases, including how to become an authorized caller to report an issue.

[TLombardi]

@fdeters, I have a similar interest in removing the focus state. Did you find a solution or workaround?

Update: I was able to set the CSS variables responsible for the focus state of the calcite-list-item like this,

    calcite-list-item {

      --calcite-ui-focus-color: none !important

    }

Hope this helps the next person trying to find a workaround for something like this.

[fdeters]

Coming back to this very, very late - glad you found a workaround. We ended up building a custom component due to other constraints.

In general, I've found targeted CSS overrides like the one you describe to be really effective at customizing component behavior (and it's only gotten better as the Calcite team keeps releasing updates)