Ability to change class outside of the Search Bar component

[paulrohrbeck]

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 current method introduces errors when the CSS class is changed outside the components toggle method. 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.