Merge pull request #1367 from framer/fix/reorder-z-index

Changing at-rest z-index for Reorder.Item to "unset"
framer · Nov 23, 2021 · 806c6ec · 806c6ec
2 parents 0542616 + 7f02309
commit 806c6ec
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 
 -   Fixing animating to CSS variables with `SVGElement`. [Issue](https://github.com/framer/motion/issues/1334)
+-   Unsetting `z-index` for resting `Reorder.Item` components. [Issue](https://github.com/framer/motion/issues/1313)
 
 ## [5.3.2] 2021-11-23
 

diff --git a/src/components/Reorder/Item.tsx b/src/components/Reorder/Item.tsx
@@ -59,7 +59,7 @@ export function ReorderItem<V>(
     }
 
     const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) =>
-        latestX || latestY ? 1 : 0
+        latestX || latestY ? 1 : "unset"
     )
 
     const layout = useRef<Box | null>(null)

diff --git a/src/components/Reorder/__tests__/index.test.tsx b/src/components/Reorder/__tests__/index.test.tsx
@@ -15,7 +15,7 @@ describe("Reorder", () => {
         const staticMarkup = renderToStaticMarkup(<Component />)
         const string = renderToString(<Component />)
 
-        const expectedMarkup = `<article><main style="z-index:0;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></main></article>`
+        const expectedMarkup = `<article><main style="z-index:unset;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></main></article>`
 
         expect(staticMarkup).toBe(expectedMarkup)
         expect(string).toBe(expectedMarkup)
@@ -34,7 +34,7 @@ describe("Reorder", () => {
         const staticMarkup = renderToStaticMarkup(<Component />)
         const string = renderToString(<Component />)
 
-        const expectedMarkup = `<article><main style="z-index:0;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></main></article>`
+        const expectedMarkup = `<article><main style="z-index:unset;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></main></article>`
 
         expect(staticMarkup).toBe(expectedMarkup)
         expect(string).toBe(expectedMarkup)

diff --git a/src/motion/__tests__/ssr.test.tsx b/src/motion/__tests__/ssr.test.tsx
@@ -133,7 +133,7 @@ function runTests(render: (components: any) => string) {
         const div = render(<Component />)
 
         expect(div).toBe(
-            `<ul><li style="z-index:0;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></li></ul>`
+            `<ul><li style="z-index:unset;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></li></ul>`
         )
     })
 
@@ -148,7 +148,9 @@ function runTests(render: (components: any) => string) {
         }
         const div = render(<Component />)
 
-        expect(div).toBe(`<ul><li style="z-index:0;transform:none"></li></ul>`)
+        expect(div).toBe(
+            `<ul><li style="z-index:unset;transform:none"></li></ul>`
+        )
     })
 
     test("Reorder: Renders provided element", () => {
@@ -163,7 +165,7 @@ function runTests(render: (components: any) => string) {
         const div = render(<Component />)
 
         expect(div).toBe(
-            `<div><div style="z-index:0;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></div></div>`
+            `<div><div style="z-index:unset;transform:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x" draggable="false"></div></div>`
         )
     })
 }