From de573407cb65e334d7df7411d1296660aa7e0dcf Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Sun, 24 Jan 2021 13:31:42 -0600
Subject: [PATCH] Fix crash when tabbing through buttons

This fixes a crash caused by react-dropzone due to the fact that button
elements aren't compatible with whatever react-dropzone is looking for.

    TypeError: rootRef.current.isEqualNode is not a function
    (anonymous function)
    node_modules/react-dropzone/dist/es/index.js:473
    470 |
    471 | var onKeyDownCb = useCallback(function (event) {
    472 |   // Ignore keyboard events bubbling up the DOM tree
    > 473 |   if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
        | ^  474 |     return;
    475 |   }
    476 |

Wrapping it in a div element solves the problem.

Also disable tabIndex on the dropzone to prevent the button from being
focused twice when tabbing through the buttons.
---
 src/components/OpenFileButton.tsx | 55 +++++++++++++++++--------------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/src/components/OpenFileButton.tsx b/src/components/OpenFileButton.tsx
index e63c07e7..28402120 100644
--- a/src/components/OpenFileButton.tsx
+++ b/src/components/OpenFileButton.tsx
@@ -100,33 +100,38 @@ class OpenFileButton extends React.Component<Props> {
                         position={Position.BOTTOM}
                         hoverOpenDelay={tooltipDelay}
                     >
-                        <Button
+                        <div
                             {...getRootProps()}
-                            intent={Intent.PRIMARY}
-                            disabled={this.props.enabled === false}
-                            className="no-box-shadow"
-                            style={
-                                this.props.enabled === false
-                                    ? { pointerEvents: 'none' }
-                                    : undefined
-                            }
-                            // onClick={this.props.onClick}
-                            // breaks Dropzone when this.props.onClick is undefined
-                            // so we have to do it the long way
-                            {...(this.props.onClick
-                                ? { onClick: this.props.onClick }
-                                : {})}
+                            tabIndex={-1}
+                            className="pb-open-file-button-root"
                         >
-                            <input {...getInputProps()} />
-                            {this.props.showProgress ? (
-                                <Spinner
-                                    value={this.props.progress}
-                                    intent={Intent.PRIMARY}
-                                />
-                            ) : (
-                                <img src={this.props.icon} alt={this.props.id} />
-                            )}
-                        </Button>
+                            <Button
+                                intent={Intent.PRIMARY}
+                                disabled={this.props.enabled === false}
+                                className="no-box-shadow"
+                                style={
+                                    this.props.enabled === false
+                                        ? { pointerEvents: 'none' }
+                                        : undefined
+                                }
+                                // onClick={this.props.onClick}
+                                // breaks Dropzone when this.props.onClick is undefined
+                                // so we have to do it the long way
+                                {...(this.props.onClick
+                                    ? { onClick: this.props.onClick }
+                                    : {})}
+                            >
+                                <input {...getInputProps()} />
+                                {this.props.showProgress ? (
+                                    <Spinner
+                                        value={this.props.progress}
+                                        intent={Intent.PRIMARY}
+                                    />
+                                ) : (
+                                    <img src={this.props.icon} alt={this.props.id} />
+                                )}
+                            </Button>
+                        </div>
                     </Tooltip>
                 )}
             </Dropzone>