<sl-color-picker hoist> causes warning due to non-passive touchmove listener

[theacodes]

Describe the bug

Using <sl-color-picker hoist> causes the following warning in Chrome:

lit-html.ts:2057 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

This originates from

shoelace/src/components/color-picker/color-picker.component.ts

Line 491 in eb42671

private handleTouchMove(event: TouchEvent) {

. If the event handler doesn't need to be blocking, it could be addressed using:

@eventOptions({passive: true})
private handleTouchMove(event: TouchEvent)

If the event handler does need to be blocking, the warning can be silenced by explicitly specifying passive: false:

@eventOptions({passive: false})
private handleTouchMove(event: TouchEvent)

To Reproduce

Place a hoisted sl-color-picker on the page:

<sl-color-picker hoist></sl-color-picker>

And look at the developer console in Chrome.

Demo

https://codepen.io/theacodes/pen/ExzYGVj)

Browser / OS

• OS: macOS 14.4.1 23E224 arm64
• Browser: Chrome
• Browser version: 124.0.6367.119 (Official Build) (arm64)

[claviska]

Thanks for reporting this! The fix has been applied in d94acc6 and will be available in the next release.

[theacodes]

Thanks, @claviska, you rock!