Skip to content

Curious behaviour with DropdownToggle #98

@arcanis

Description

@arcanis

It seems that there's a particular behaviour that tells the DropdownToggle component (and maybe others) to use the children as "master button" if there's a single one, instead of creating a new one. I feel like it's a mistake:

  • It's not an intuitive behaviour - without looking at the source code, one might wonder what happens (I sure did)

  • The tag prop already allows us to customize the way the button is rendered, and is much more idomatic than adding props to already-rendered components.

  • It makes it quite harder to use icons inside a DropdownToggle (because the icon props are rewritten, so the classNames are lost). For example, the following doesn't work:

    <DropdownToggle>
        <i className={`fa fa-user`} />
    </DropdownToggle>

    One has to write the following:

    <DropdownToggle>
        <i className={`fa fa-user`} /> <span></span>
    </DropdownToggle>

    In order to bypass the check.

  • Additional issues may arise (for example, without testing, I guess that such a pattern also breaks refs, and triggers more renders than required).

Would you consider removing this behaviour?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions