fix: apply z-index to itemOne container when clip is set to 'itemOne' to ensure both items are always visible #154

Author: nerdyman

docs/storybook/content/stories/99-tests/clip.test.stories.tsx

@@ -44,6 +44,9 @@ ClipBoth.play = async ({ canvasElement }) => {
     const [itemOne, itemTwo] = Array.from(
       sliderRoot.querySelectorAll('[data-rcs="clip-item"]'),
     ) as HTMLElement[];
+
+    expect(itemOne).toBeVisible();
+    expect(itemTwo).toBeVisible();
     expect(itemOne?.style.clipPath).toBe('inset(0px 25% 0px 0px)');
     expect(itemTwo?.style.clipPath).toBe('inset(0px 0px 0px 75%)');
   });
@@ -66,6 +69,9 @@ ClipItemOne.play = async ({ canvasElement }) => {
     const [itemOne, itemTwo] = Array.from(
       sliderRoot.querySelectorAll('[data-rcs="clip-item"]'),
     ) as HTMLElement[];
+
+    expect(itemOne).toBeVisible();
+    expect(itemTwo).toBeVisible();
     expect(itemOne?.style.clipPath).toBe('inset(0px 50% 0px 0px)');
     expect(itemTwo?.style.clipPath).toBe('none');
   });
@@ -83,6 +89,9 @@ ClipItemOne.play = async ({ canvasElement }) => {
     const [itemOne, itemTwo] = Array.from(
       sliderRoot.querySelectorAll('[data-rcs="clip-item"]'),
     ) as HTMLElement[];
+
+    expect(itemOne).toBeVisible();
+    expect(itemTwo).toBeVisible();
     expect(itemOne?.style.clipPath).toBe('inset(0px 25% 0px 0px)');
     expect(itemTwo?.style.clipPath).toBe('none');
   });

lib/src/Container.tsx

@@ -5,13 +5,14 @@ import type { ReactCompareSliderCommonProps } from './types';
 
 type ContainerItemProps = ComponentPropsWithoutRef<'div'> &
   Pick<ReactCompareSliderCommonProps, 'transition'> & {
+    shouldOverlap?: boolean;
     order?: number;
   };
 
 /** Container for clipped item. */
 export const ContainerItem = forwardRef<HTMLDivElement, ContainerItemProps>(
-  ({ transition, order, ...props }, ref): ReactElement => {
-    const style: CSSProperties = {
+  ({ shouldOverlap, order, style, transition, ...props }, ref): ReactElement => {
+    const appliedStyle: CSSProperties = {
       gridArea: '1 / 1 / 2 / 2',
       order,
       maxWidth: '100%',
@@ -20,12 +21,14 @@ export const ContainerItem = forwardRef<HTMLDivElement, ContainerItemProps>(
       transition: transition ? `clip-path ${transition}` : undefined,
       userSelect: 'none',
       willChange: 'clip-path, transition',
+      zIndex: shouldOverlap ? 1 : undefined,
       KhtmlUserSelect: 'none',
       MozUserSelect: 'none',
       WebkitUserSelect: 'none',
+      ...style,
     };
 
-    return <div {...props} style={style} data-rcs="clip-item" ref={ref} />;
+    return <div {...props} style={appliedStyle} data-rcs="clip-item" ref={ref} />;
   },
 );
 
@@ -50,6 +53,7 @@ export const ContainerHandle = forwardRef<HTMLButtonElement, ContainerHandleProp
       appearance: 'none',
       WebkitAppearance: 'none',
       MozAppearance: 'none',
+      zIndex: 1,
       outline: 0,
       transform: portrait ? `translate3d(0, -50% ,0)` : `translate3d(-50%, 0, 0)`,
       transition: transition ? `${targetAxis} ${transition}` : undefined,

lib/src/ReactCompareSlider.tsx

@@ -385,7 +385,11 @@ export const ReactCompareSlider = forwardRef<
 
     return (
       <div {...props} ref={rootContainerRef} style={rootStyle} data-rcs="root">
-        <ContainerItem ref={clipContainerOneRef} transition={appliedTransition}>
+        <ContainerItem
+          ref={clipContainerOneRef}
+          transition={appliedTransition}
+          shouldOverlap={clip === ReactCompareSliderClipOption.itemOne}
+        >
           {itemOne}
         </ContainerItem>