CODEWITHSUNDEEP
angular
Craig
Craig

Reputation: 1796

How do you programatically fire a click event on a select field in an angular app?

I have styled a select field with a custom dropdown icon using this css on the select:

appearance: none;       /* remove default arrow */

And then using an absolutely positioned icon.

Now I want that icon when clicked to trigger the click event on the select field. I have tried using ViewChild to get the select element ref and trigger a click on it's nativeElement property but nothing happens.

@ViewChild('customInput') input: ElementRef;
click() {
  const ele = this.input.nativeElement as HTMLElement;
  ele.click();
  this.cd.detectChanges();
}

I have also tried template references:

<select #customInput>

<div class="arrow" (click)="customInput.click()"></div>

EDIT:

it is also worth noting that both approaches using .focus() instead does focus the element, but does not cause the dropdown list to appear.

Upvotes: 4

Views: 9108

Answers (4)

Manoj Parmar
Manoj Parmar

Reputation: 1

If you are using mat-select from Material so just replace the below a line

const ele = this.input.nativeElement as HTMLElement;

with

const ele = this.input['trigger'].nativeElement as HTMLElement;

Upvotes: 0

Craig
Craig

Reputation: 1796

I got there in the end.

It turns out that javaScript is unable to make a select field open in a normal way and so I rethought the problem and ended up using a background image positioned where the custom styled arrow would be. This is obviously slower as before I was using a material icon so it was just a font, now it is an image that it has to render - but the performance hit is so small i dont think it matters.

since the dropdown icon is now just a background image it is part of the select so when you click it you really click the select itself and that causes it to open correctly.

Upvotes: 2

programoholic
programoholic

Reputation: 5194

Craig, Here is a sample guide how you can open a select box programatically : 

let openStatus = false;

function openSelect(){
openStatus = !openStatus;
var element = document.getElementById('names');
if(openStatus){
element.size = element.length;  
 } 
 else {
 element.size = 1;   
  }
}

function handleChange(){
 alert('element slected ... closed');
 openSelect();
 }
<select id="names" onchange="handleChange()">
    <option>Foso</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
    <option>Bar</option>
</select>


<button onClick="openSelect()"> open Select </button>

When you click on the button it opens the select box. and when you click again on the button or select any element , the select box gets closed. I have used raw html and JS to explain the workaround . You can implement the same technique in angular too. Let me know if you face any issue.

Upvotes: 0

Mohan Singh
Mohan Singh

Reputation: 1162

Try This

Your HTML

 <select #customInput (click)="SelectClick()">
   <option value="1">Option</option>
 </select>
 <div class="arrow" (click)="click()">Click Here</div>

Component

@ViewChild('customInput') input: ElementRef;
click() {
  alert('Div click');
  const ele = this.input.nativeElement as HTMLElement;
  ele.click();
 }
 SelectClick()
 {
  alert("Select Click");
 }

Upvotes: 0

Related Questions