fix: remove render warning for button inside button
Luke Karrys committed
Sep 24, 2023 at 13:16 UTC
fca1358e4a17c95a5782c302ec6e1e423e415dd8
1 file changed
+9
-5
theme/src/components/drawer.js
+9
-5
@@ -7,13 +7,17 @@ function Drawer({isOpen, onDismiss, children}) {
7
return (
8
<AnimatePresence>
9
{isOpen ? (
10
- <button
11
- // These event handlers fix a bug that caused links below the fold
12
- // to be unclickable in macOS Safari.
13
- // Reference: https://github.com/theKashey/react-focus-lock/issues/79
10
+ // These event handlers fix a bug that caused links below the fold
11
+ // to be unclickable in macOS Safari.
12
+ // Reference: https://github.com/theKashey/react-focus-lock/issues/79
13
+
14
+ <div
15
style={{textAlign: 'start', fontSize: '1rem', lineHeight: '1.5rem'}}
16
onMouseDown={event => event.preventDefault()}
17
+ onKeyDown={event => event.target.focus()}
18
onClick={event => event.target.focus()}
19
+ role="button"
20
+ tabIndex="0"
21
>
22
<FocusOn returnFocus={true} onEscapeKey={() => onDismiss()}>
23
<Fixed
@@ -47,7 +51,7 @@ function Drawer({isOpen, onDismiss, children}) {
51
{children}
52
</Fixed>
53
</FocusOn>
50
- </button>
54
+ </div>
55
) : null}
56
</AnimatePresence>
57
)