Skip to content

Repository navigation

fix(material): ignore long-press on carousel items #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mprovok merged 2 commits into from
Oct 2, 2026
Merged

fix(material): ignore long-press on carousel items #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1836b8d
refactor(material): split CSS for carousel variants to separate files
mprovok Oct 2, 2026
0838fae
fix(material): ignore long-press on carousel items
mprovok Oct 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/silly-flies-sort.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@solidmaterial/material': patch
---

Ignore long-press on carousel items
5 changes: 5 additions & 0 deletions packages/material/src/components/carousel/MaterialCarouselItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export const MaterialCarouselItem: FlowComponent<MaterialCarouselItemProps> = pr
// (especially needed in Firefox, WebKit browsers can handle this in CSS)
const onDragStart = (event: Event) => event.preventDefault();

const onContextMenu = (event: PointerEvent) => {
event.preventDefault();
};

return (
<MaterialCarouselItemHolder>
<sm-carousel-item
Expand All @@ -32,6 +36,7 @@ export const MaterialCarouselItem: FlowComponent<MaterialCarouselItemProps> = pr
bool:data-disabled={props.disabled}
class={styles['item']}
onClick={(event: PointerEvent) => props.onClick(event)}
onContextMenu={onContextMenu}
>
<MaterialFocusRing attachTo={ref} />
<MaterialRipple attachTo={ref} disabled={props.disabled} />
Expand Down
326 changes: 10 additions & 316 deletions packages/material/src/components/carousel/MaterialCarouselItemHolder.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
@import './styling/variants/MaterialCarouselItemHolderVariantCenteredHero.module.css';
@import './styling/variants/MaterialCarouselItemHolderVariantFullScreen.module.css';
@import './styling/variants/MaterialCarouselItemHolderVariantHero.module.css';
@import './styling/variants/MaterialCarouselItemHolderVariantMultiBrowse.module.css';
@import './styling/variants/MaterialCarouselItemHolderVariantUncontained.module.css';

@layer material.components {
:root {
--md-comp-carousel-item-small-min-width: 40px;
Expand Down Expand Up @@ -36,44 +42,6 @@
initial-value: 0px;
}

@property --translate {
syntax: '<length-percentage>';
inherits: true;
initial-value: 0px;
}

@keyframes multi-browse-expand-medium-item {
from {
--max-width: var(--md-comp-carousel-size-small);
margin-inline-end: calc(-1 * (var(--md-comp-carousel-size-large) - var(--md-comp-carousel-size-small)));
}
to {
--max-width: var(--md-comp-carousel-size-medium);
margin-inline-end: calc(-1 * (var(--md-comp-carousel-size-large) - var(--md-comp-carousel-size-medium)));
}
}

@keyframes multi-browse-expand-large-item {
from {
--max-width: var(--md-comp-carousel-size-medium);
margin-inline-end: calc(-1 * (var(--md-comp-carousel-size-large) - var(--md-comp-carousel-size-medium)));
}
to {
--max-width: var(--md-comp-carousel-size-large);
margin-inline-end: 0;
}
}

@keyframes multi-browse-expand-last-item {
from {
--max-width: 0;
}

to {
--max-width: var(--md-comp-carousel-size-large);
}
}

@keyframes collapse-item {
from {
--max-width: var(--md-comp-carousel-size-large);
Expand All @@ -88,68 +56,6 @@
}
}

@keyframes uncontained-expand-item {
from {
--max-width: var(--md-comp-carousel-size-medium);
}

to {
--max-width: var(--md-comp-carousel-size-large);
}
}

@keyframes hero-expand-item {
from {
--max-width: var(--md-comp-carousel-size-small);
}

to {
--max-width: var(--md-comp-carousel-size-large);
}
}

@keyframes centered-hero-expand-item {
from {
--max-width: var(--md-comp-carousel-size-small);
}

to {
--max-width: var(--md-comp-carousel-size-large);
}
}

@keyframes centered-hero-expand-item-translate {
from {
--translate: calc(-1 * (var(--md-comp-carousel-size-large) - var(--md-comp-carousel-size-small)));
}

to {
--translate: 0;
}
}

@keyframes centered-hero-expand-last-item {
from {
--max-width: 0;
}

to {
--max-width: var(--md-comp-carousel-size-large);
}
}

@keyframes centered-hero-collapse-item {
from {
--max-width: var(--md-comp-carousel-size-large);
--translate: 0;
}

to {
--max-width: calc(var(--md-comp-carousel-size-small));
--translate: calc(var(--md-comp-carousel-size-large) - var(--md-comp-carousel-size-small));
}
}

.container {
--md-comp-carousel-size-small: var(--md-comp-carousel-item-small-max-width);

Expand Down Expand Up @@ -204,228 +110,16 @@
pointer-events: none;
}

/**********************************************************************/
/* Multi-browse variant */
/**********************************************************************/

sm-carousel[data-variant='multi-browse'] .container {
--container-width: 100cqi;

/* Animated by @keyframes needed for WebKit */
/* margin-inline-end: calc(-1 * (var(--min-width) - max(var(--md-comp-carousel-size-small), var(--max-width)))); */

@supports (animation-timeline: view()) {
animation:
multi-browse-expand-medium-item linear both,
multi-browse-expand-large-item linear forwards,
collapse-item linear forwards;
animation-timeline: view(x);
animation-range-start:
var(--md-comp-carousel-size-small),
var(--md-comp-carousel-size-large),
exit 0%;
animation-range-end:
var(--md-comp-carousel-size-large),
calc(2 * var(--md-comp-carousel-size-large) + var(--md-comp-carousel-container-gap)),
exit 100%;

&:last-child {
animation: multi-browse-expand-last-item linear both;
animation-timeline: view(x);
animation-range-start: normal;
animation-range-end: calc(1 * var(--md-comp-carousel-size-large));
margin-inline-end: 0;
}
}
}

/**********************************************************************/
/* Uncontained variant */
/**********************************************************************/

sm-carousel[data-variant='uncontained'] .container {
--container-width: calc(100cqi - var(--md-comp-carousel-size-small));

margin-inline-end: calc(-1 * (var(--min-width) - max(var(--md-comp-carousel-size-medium), var(--max-width))));

@supports (animation-timeline: view()) {
animation:
uncontained-expand-item linear both,
collapse-item linear forwards;
animation-timeline: view(x);
animation-range-start:
entry 0%,
exit 0%;
animation-range-end:
var(--md-comp-carousel-size-large),
exit 100%;

&:last-child {
animation: uncontained-expand-item linear both;
animation-timeline: view(x);
animation-range-start: entry 0%;
animation-range-end: var(--md-comp-carousel-size-large);
margin-inline-end: 0;
}
}
}

/**********************************************************************/
/* Hero variant */
/**********************************************************************/

sm-carousel[data-variant='hero'] .container {
--container-width: calc(100cqi - var(--md-comp-carousel-size-small) - var(--md-comp-carousel-container-gap));

@container (width < 600px) {
--md-comp-carousel-count-large: 1;
}

margin-inline-end: calc(-1 * (var(--min-width) - max(var(--md-comp-carousel-size-small), var(--max-width))));

@supports (animation-timeline: view()) {
animation:
hero-expand-item linear both,
collapse-item linear forwards;
animation-timeline: view(x);
animation-range-start:
var(--md-comp-carousel-size-small),
exit 0%;
animation-range-end:
calc(
var(--md-comp-carousel-size-large) + var(--md-comp-carousel-container-gap) +
var(--md-comp-carousel-size-small)
),
exit 100%;

/* Make sure the second last item ends at the leading edge of the scroll container
so that it doesn't continue outside the container. This causes the last two items
to have shapes that are the reverse (small + large) of the first two (large + small) */
&:nth-last-child(2) {
animation-range-end:
calc(
var(--md-comp-carousel-size-large) + var(--md-comp-carousel-container-gap) +
var(--md-comp-carousel-size-small)
),
exit calc(100% - var(--md-comp-carousel-size-small));
}

&:last-child {
animation: hero-expand-item linear both;
animation-timeline: view(x);
animation-range-start: var(--md-comp-carousel-size-small);
animation-range-end: var(--md-comp-carousel-size-large);
margin-inline-end: 0;
}
}
}

/**********************************************************************/
/* Centered-aligned hero variant */
/**********************************************************************/

sm-carousel[data-variant='centered-hero'] .container {
--container-width: calc(
100cqi - 2 * var(--md-comp-carousel-size-small) - 2 * var(--md-comp-carousel-container-gap)
);

@container (width < 600px) {
--md-comp-carousel-count-large: 1;
}

@supports (animation-timeline: view()) {
animation:
centered-hero-expand-item linear both,
centered-hero-expand-item-translate linear both,
centered-hero-collapse-item linear forwards;
animation-timeline: view(x);
animation-range-start:
entry var(--md-comp-carousel-size-small),
cover
calc(
-1 *
(
var(--md-comp-carousel-size-large) - var(--md-comp-carousel-size-small) +
var(--md-comp-carousel-container-gap)
)
),
exit 0%;
animation-range-end:
cover
calc(
var(--md-comp-carousel-size-large) + var(--md-comp-carousel-container-gap) +
var(--md-comp-carousel-size-small)
),
entry var(--md-comp-carousel-size-small),
exit calc(var(--md-comp-carousel-size-large) - var(--md-comp-carousel-size-small));

&:first-child {
--container-width: calc(100cqi - var(--md-comp-carousel-size-small) - var(--md-comp-carousel-container-gap));

animation:
centered-hero-expand-item linear both,
centered-hero-collapse-item linear forwards;
animation-timeline: view(x);
animation-range-start:
entry var(--md-comp-carousel-size-small),
exit 0%;
animation-range-end:
cover
calc(
var(--md-comp-carousel-size-large) + var(--md-comp-carousel-container-gap) +
var(--md-comp-carousel-size-small)
),
exit calc(var(--md-comp-carousel-size-large) - var(--md-comp-carousel-size-small));
}

&:last-child {
--container-width: calc(100cqi - var(--md-comp-carousel-size-small) - var(--md-comp-carousel-container-gap));

animation:
centered-hero-expand-item linear both,
centered-hero-expand-item-translate linear both;
animation-timeline: view(x);
animation-range-start:
entry var(--md-comp-carousel-size-small),
cover
calc(
-1 *
(
var(--md-comp-carousel-size-large) - var(--md-comp-carousel-size-small) + 2 *
var(--md-comp-carousel-container-gap)
)
);
animation-range-end:
var(--md-comp-carousel-size-large),
entry var(--md-comp-carousel-size-small);
}

sm-carousel-item {
translate: var(--translate);
}
scroll-margin-inline-start: calc(var(--md-comp-carousel-container-gap) + var(--md-comp-carousel-size-small));
}
}

/**********************************************************************/
/* Full-screen variant */
/**********************************************************************/

sm-carousel[data-variant='full-screen'] .container {
--md-comp-carousel-count-large: 1;
--container-width: 100cqi;

min-height: 100dvh;
}

/**********************************************************************/
/* Reduced motion */
/**********************************************************************/

@media (prefers-reduced-motion: reduce) {
.container {
/* Disable animation so that items do not expand and collapse when
they enter the scroll port */
/**
* Disable animation so that items do not expand and collapse when
* they enter the scroll port
*/
animation: none !important;
}

Expand Down
Loading
Loading