Skip to content

CDropdownToggle disabled state behavior #384

@Boubaker93

Description

@Boubaker93

Hello,
I'm using CDropdown component with variant="nav-item" and inside I added a CDropdownToggle that I want to add a disabled property. But when the disabled property is added, the DropDown still is clickable and when clicked it redirects to /#

Here is the sample code that i'm using:

      <CHeaderNav style={{ width: '100%' }}>
      <CDropdown style={{ width: '100%' }} variant="nav-item">
        <CDropdownToggle caret={false} disabled>
          <div className="d-flex">
            <div style={{ width: '100%' }}>{title || '---'}</div>
          </div>
        </CDropdownToggle>
        <CDropdownMenu>
          {array?.map((item) => (
            <CDropdownItem
              key={item?.id}
              onClick={() => {
                onChange(item)
              }}
            >
              {item?.title}
            </CDropdownItem>
          ))}
        </CDropdownMenu>
      </CDropdown>
    </CHeaderNav>

Can you guys help me?
Thank you.

System:

  • Operating system and version: macOS 14.1.2
  • Browser and version: Chrome 120.0.6099.199

Core UI:

  • @coreui/coreui-pro: ^4.6.4,
  • @coreui/react-pro: 4.15.2
  • @coreui/utils: ^2.0.2,

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions