I am trying to apply a class to the container when either the input field is focused or when the dropdown component receives focus or is clicked. The class should be removed when the focus is lost.
The requirement is for the input container to have the 'active' class when either the input field or the dropdownComponent is in focus or clicked. I managed to do this using ng-focus and ng-blur for the input field.
However, applying ng-focus and ng-blur directly to an included component did not work as expected. I tried wrapping the component in a div container, but still faced issues with ng-blur.
Here's the code snippet:
<div class="input-container" ng-class="{'active': focus}">
<dropdownComponent ng-if="dropdownButton" element="dropdownElement">
</dropdownComponent>
<input type="text"
id="{{inputElement.key}}"
class="form-control"
placeholder="{{inputElement.placeholder}}"
ng-model="inputElement.values[0]"
ng-readonly="{{::inputElement.readonly}}"
ng-focus="focus=true"
ng-blur="focus=false;"
ng-required="{{::inputElement.required}}"
novalidate />
</div>
Is there a way to add something like this?
<dropdownComponent ng-if="dropdownButton"
ng-focus="focus=true"
ng-blur="focus=false"
element="dropdownElement">
</dropdownComponent>
Directly adding ng-focus and ng-blur to the component did not yield the desired results.
Although focus-within using CSS works, it is not supported in older browsers.