Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(controls): Add forwardRef to Dropdown and Checkbox #1381

Merged
merged 4 commits into from
May 14, 2021

Conversation

ConradJChan
Copy link
Contributor

@ConradJChan ConradJChan commented May 14, 2021

Fixes an issue where a console error occurs when opening the Model3DSettings menu because SettingsList attempts to set focus to the menu item that correlates to the activeIndex. Since SettingsDropdown and SettingsCheckboxItem are functional components, an error is logged.

TODO:

  • cross browser testing

@ConradJChan ConradJChan requested a review from a team as a code owner May 14, 2021 19:09
@@ -0,0 +1,7 @@
import React from 'react';

declare module 'react' {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed because React.forwardRef doesn't support Generics typing

return (
<div ref={dropdownElRef} className={classNames('bp-SettingsDropdown', className)}>
<div className={classNames('bp-SettingsDropdown', className)}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved the ref to a separate container on L92 so that clicking on the label is a valid way to close the dropdown

src/lib/viewers/controls/settings/SettingsDropdown.tsx Outdated Show resolved Hide resolved
src/lib/viewers/controls/settings/SettingsDropdown.scss Outdated Show resolved Hide resolved
@@ -74,52 +71,69 @@ export default function SettingsDropdown<V extends Value = string>({

useClickOutside(dropdownElRef, () => setIsOpen(false));

// Customize the forwarded ref to combine usage with the ref internal to this component
React.useImperativeHandle(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems unorthodox to expose the button as the component's ref, since it's a compound component. If we want to expose the dropdown itself later, that could get confusing.

@ConradJChan ConradJChan reopened this May 14, 2021
@mergify mergify bot merged commit 79fbd40 into box:master May 14, 2021
@ConradJChan ConradJChan deleted the fix-settings-ref branch May 14, 2021 22:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants