isDisabled not working in Breadcrumbs.Item alongside Breadcrums.Link

[regularpersonn]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Primitive components

How is your app built?

Create React

What browsers are you seeing the problem on?

Chrome, Safari

Which region are you seeing the problem in?

No response

Please describe your bug.

isDisabled flag is not being respected despite confirming that the framework is rendering <a disabled... component in HTML.

What's the expected behaviour?

Breadcrumb item should be disabled when isDisabled is true for either Item or Link

Help us reproduce the bug!

Can be reproduced by using the provided code snippet (note I am even hard coding true and it doesn't disable the link).

Code Snippet

       <Breadcrumbs.Container>
          <Breadcrumbs.Item >
            <Breadcrumbs.Separator />
            <Breadcrumbs.Link onClick={() => setStep(1)} isCurrent={step === 1}>Select Blueprint</Breadcrumbs.Link>
            <Breadcrumbs.Separator />
          </Breadcrumbs.Item>
          <Breadcrumbs.Item isDisabled={true}>
            <Breadcrumbs.Link onClick={() => setStep(2)} isCurrent={step === 2} isDisabled={true}>Select 2</Breadcrumbs.Link>
            <Breadcrumbs.Separator />
          </Breadcrumbs.Item>
        </Breadcrumbs.Container> 

Console log output

No response

Additional information and screenshots

[esauerbo]

Hi @regularpersonn thanks for raising this. Could you clarify exactly what the desired behavior is, e.g. are you thinking the onClick handlers shouldn't run if disabled?

[regularpersonn]

Yeah. My use case is I want the breadcrumbs to only function when the previous one has met the correct condition, as each one allows a selection that builds upon the previous one.

[esauerbo]

We're working on a fix for this, and I'll update you when we get that released. In the meantime you can add disabled styling to the breadcrumbs item using css. If you do something like this you can add isDisabled to just the Breadcrumbs.Item and it will prevent onclick events from firing.

.amplify-breadcrumbs__item {
  &[disabled] {
    cursor: not-allowed;
    .amplify-breadcrumbs__link {
      background-color: var(
        --amplify-components-breadcrumbs__link-disabled-color
      );
      color: var(--amplify-components-breadcrumbs__link-disabled-color);
      pointer-events: none;
    }
  }
}

[esauerbo]

@regularpersonn sorry for the churn on this. Discussed this further with the team, and it doesn't make sense to support isDisabled with Breadcrumbs because disabling links is not natively supported in html and is against web standards. I would recommend just rendering text instead of BreadCrumbs.Link for elements that you wish to disable.

I know the props tab for Breadcrumbs currently lists isDisabled and we're working to get that updated to avoid confusion in the future.

[regularpersonn]

That’s fair enough. Thanks!

[reesscot]

We're closing out this feature request ticket as we don't plan on supporting this in Breadcrumbs due to the reasons mentioned above. Please open another ticket if you have further questions on use of Breadcrumbs components.