Skip to content

No way to obtain refs to the underlying HTML elements without ReactDOM.findDOMNode #27

Description

@christopherbot

My motivation for wanting a way to reference the underlying HTML elements of the Dropdown components is to enhance the scrolling functionality of my DropdownMenu implementation.

I have added arrow buttons to the top and bottom of my DropdownMenu that appear when there is hidden content in those directions. When clicked, I want these buttons to cause the the DropdownMenu to scroll in that direction by a certain amount.

I have the behaviour working using ReactDOM.findDOMNode but I would like to use a callback ref instead (coming from the discussion in this issue).

I believe a simple solution is for the DropdownMenu component to accept an onRef prop that forwards to the Component (seen below), something like ref={this.props.onRef} underneath style={style}:

<Component
{...props}
role="menu"
className={cx(className, {
[styles.dropdownMenu]: true,
[styles.selected]: activeMenuItems.length > 0,
[styles.pullRight]: !!pullRight
})}
style={style}
>

Are you open to something like this?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions