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
- 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
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