adobe / adobe/aem-core-cif-components
Ability to change class outside of the Search Bar component
- Dominant language
- Java
- Stars
- 109
- Forks
- 78
- Avg merge
- 4d 18h
- Merged PRs (30d)
- 4
Description
### User Story
As a developer, I want the ability to close the Search Bar component by simply changing the CSS class without bugs resulting from the internal toggle() method.
### Description & Motivation
Instead of relying on an internal state (this._state.visible), we would like to check against the current CSS class (.searchBar__root_open) of the the search bar root
The motivation for this change is to prevent phantom clicks that don’t change the component state when the CSS of the root element is changed (from an outside source). Furthermore, this will ultimately let the user see only one menu item open at a time.
### Deliverables
Provide a code update for the toggle() function within searchbar.js (lines 73 -81) to check for the current CSS state and toggle that class. This would require code change and also update stateObject.visible afterward.
### Acceptance Criteria
Should have the ability to detect the current CSS state of the component and toggle accordingly despite any internal state. (Check against this._classes.open class that gets assigned to the root element)
### Verification Steps
- Author the component and "view as published".
- Next, click to open the Search Bar and leave the component in the open state.
- Now, manually remove the open class on the root element (save). This is just under the trigger button in most cases.
- Proceed to click the search bar trigger again.
- Verify that when the CSS class on the root changes, the search bar closes but now clicking the trigger will open it again. Previously, these actions would result in a phantom click where nothing happened.
Contributor guide
Research direction
Start in searchbar.js at toggle() around lines 73–81, then inspect how the root element’s this._classes.open class and stateObject.visible are used. Follow the verification steps by opening the Search Bar, removing the root open class, and clicking the trigger again. Done means the trigger detects the changed CSS state and opens the Search Bar without a phantom click.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100