Use a ref to more reliably set focus

Author: brianespinosa

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+.DS_Store
 .next
 todo.md
 current.md

packages/mdx/dev/content/slideshow-autofocus.mdx

@@ -0,0 +1,111 @@
+# Slideshow with controls autofocus
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+<CH.Slideshow preset="https://codesandbox.io/s/w5wfe" hasAutoFocusControls>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+```jsx src/App.js
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+  const bg = "hsl(20, 100%, 50%)"
+  return (
+    <div className="container">
+      <motion.div
+        className="swatch"
+        animate={{
+          backgroundColor: bg,
+        }}
+        transition={transition}
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## Step 2
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+  const bg = "hsl(110, 100%, 50%)"
+  return (
+    <div className="container">
+      <motion.div
+        className="swatch"
+        animate={{
+          backgroundColor: bg,
+        }}
+        transition={transition}
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## Step 3
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+  const bg = "hsl(200, 100%, 50%)"
+  return (
+    <div className="container">
+      <motion.div
+        className="swatch"
+        animate={{
+          backgroundColor: bg,
+        }}
+        transition={transition}
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## Step 4
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+  const bg = "hsl(290, 100%, 50%)"
+  return (
+    <div className="container">
+      <motion.div
+        className="swatch"
+        animate={{
+          backgroundColor: bg,
+        }}
+        transition={transition}
+      />
+    </div>
+  )
+}
+```
+
+</CH.Slideshow>

packages/mdx/src/mdx-client/slideshow.tsx

@@ -26,6 +26,13 @@ export function Slideshow({
   presetConfig?: PresetConfig
   style?: React.CSSProperties
 }) {
+  const controlsRef = React.useRef(null);
+
+  React.useEffect(() => {
+      // Only set focus on controls input if we have configured to do so
+      hasAutoFocusControls && controlsRef.current.focus();
+  }, []);
+
   const { stepsChildren, previewChildren } =
     extractPreviewSteps(children, hasPreviewSteps)
   const withPreview = presetConfig || hasPreviewSteps
@@ -100,12 +107,12 @@ export function Slideshow({
             Prev
           </button>
           <input
-            autoFocus={hasAutoFocusControls}
-            type="range"
-            min={0}
             max={editorSteps.length - 1}
-            value={state.stepIndex}
+            min={0}
+            ref={controlsRef}
             step={1}
+            type="range"
+            value={state.stepIndex}
             onChange={e =>
               setState({
                 stepIndex: +e.target.value,