adobe / adobe/aem-core-wcm-components

Navigation component - Unable to dynamically add class attribute to the <a> tag, as the static class attribute overrides it

Open
#2,437 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
795
Forks
775
Avg merge
3d 22h
Merged PRs (30d)
8

Description

### Expected Behaviour Should be able to add dynamically (from backend) css classes to Class attribute of tag in Navigation component's HTML

### Actual Behaviour
Unable to add CSS classes to Class attribute of
tag in Navigation component's HTML due to a static class attribute field which overrides the value passed from backend.

### Reproduce Scenario
Using the delagation pattern of the Core component, extend the NavigationItemImpl/NavigationImpl models.

#### Steps to Reproduce

1. Create a new proxy component for Navigation core component
2. Extend the V2 version of the core component
3. In Java backend extend the Sling Model implementation for the new resource path (created as per step-1)
4. For example, CustomNavigationImpl implements Navigation Interface and CustomNavigationItemsImpl implements NavigationItemsImpl
5. Using the LinkImpl class (buildHtmlAttributes()) add the required custom attributes to the
tag
6. In the code sample below, eventhough we are adding some extra css classes to class attribute (via: **data-sly-attribute="${item.link.htmlAttributes}"**), it gets overwritten due to static class attribute (**class="cmp-navigation__item-link"**)

Note: As we have some legacy code and we are in process of migration (part of future roadmap), we are still using **Static templates**.

#### Platform and Version

- AEM 6.5 OnPremise
- Core Components' Version: 2.20.8

#### Sample Code that illustrates the problem (Below code snippet is from itemContent.html of Navigation component
`
${item.title}
`

#### Logs taken while reproducing problem

Contributor guide

Open the contributing guide

Research direction

Start with the Navigation component's itemContent.html and inspect how data-sly-attribute="${item.link.htmlAttributes}" interacts with the static class attribute. Read NavigationItemImpl/NavigationImpl and LinkImpl.buildHtmlAttributes(); done means backend-supplied CSS classes appear on the element without removing cmp-navigation__item-link.

Written by the indexing model from the issue text.

Assessment

Tech stack
java
Domain
backend, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.