this repo has no description
Sometimes, have to think out of the box
Focus first, then scroll
+2
-10
+2
-10
src/components/media-modal.jsx
+2
-10
src/components/media-modal.jsx
···
241
241
onClick={(e) => {
242
242
e.preventDefault();
243
243
e.stopPropagation();
244
+
carouselRef.current.focus();
244
245
carouselRef.current.scrollTo({
245
246
left: carouselRef.current.clientWidth * (currentIndex - 1),
246
247
behavior: 'smooth',
247
248
});
248
-
setTimeout(() => {
249
-
// Delay is needed for Safari, the focus stops it from scrolling
250
-
// 1000 is hypothetical
251
-
carouselRef.current?.focus();
252
-
}, 1000);
253
249
}}
254
250
>
255
251
<Icon icon="arrow-left" />
···
261
257
onClick={(e) => {
262
258
e.preventDefault();
263
259
e.stopPropagation();
260
+
carouselRef.current.focus();
264
261
carouselRef.current.scrollTo({
265
262
left: carouselRef.current.clientWidth * (currentIndex + 1),
266
263
behavior: 'smooth',
267
264
});
268
-
setTimeout(() => {
269
-
// Delay is needed for Safari, the focus stops it from scrolling
270
-
// 1000 is hypothetical
271
-
carouselRef.current?.focus();
272
-
}, 1000);
273
265
}}
274
266
>
275
267
<Icon icon="arrow-right" />