Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 01:23:52 +00:00
Code Issues Releases Activity

Fix crash when tabbing through buttons

Browse Source 
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.
This commit is contained in:
David Lechner
2021-01-24 13:31:42 -06:00
parent 5614bb1747
commit de573407cb
1 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/OpenFileButton.tsx
+30 -25
View File
@@ -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>