Trying to utilize CSS to make the input box expand on hover/focus of the search ICON in CSS
Attempting to call a function in HTML to an Angular component (seems like CSS cannot be used with datalist element) so that the input tag remains expanded when shifting focus or selecting an item from the datalist
This is example HTML code:
<div class="searchDiv">
<span class="glyphicon glyphicon-search" id="searchSpan" (click)="searchEvent($event)"></span>
<form [formGroup]="searchGroup" (ngSubmit)="searchEvent($event)">
<input type="text" placeholder="search" id="searchInput" formControlName="localInput" class="" list="promotionsSearchList" (keyup)="searchEvent($event)" />
</form>
<datalist id="promotionsSearchList" class="test" onfocus="focusEvent()" onmousemove="focusEvent()">
</datalist>
</div>
This is the corresponding CSS:
.customClass {
float: center;
}
.grid {
display: inline-grid;
grid-template-columns: 150px 150px 150px 150px auto;
grid-template-rows: repeat(3,25px);
width: 100%;
}
#headerDiv {
grid-row: 1;
grid-column: 1/6;
padding-top: 14px;
}
#firstElementSpan {
grid-row: 1;
grid-column: 2/6;
}
...
.searchDiv{
width: 500px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
...
This is for sample Angular component call:</p>
<pre><code>focusEvent(){
console.log('onfocusEvent');
const inputElement = document.getElementById('searchInput');
inputElement.style.width = '300px';
}
The function does not seem to be called. Tried using Angular's property binding as well but without success. The goal is to keep the input element expanded while focusing on the datalist and navigating through the list. Any assistance would be appreciated.