0

I've a dropdown component which is inside a custom parent component timeselector. I've tried taking help from:

  1. How to avoid dropdown menu to close menu items on clicking inside
  2. Avoid dropdown menu close on click inside

and rest of the solutions are using some library or the other. But here I'm creating this component from scratch without bootstrap, primeng or material (* because my team lead doesn't want to use them for some reasons, I didn't argue). Here is the screenshot:

enter image description here

The widget pops up on click event. As you can see I've a dropdown with four options, but the moment I click on any option, the entire widget simply collapses. However that option gets selected anyway. But the widget collapses back. See the screenshot:

enter image description here

Here is my code. Please correct me where I am wrong.

timeselector.component.html

<div class="time-selector">
  <p-overlayPanel class="my-overlay" #op>
    <div class="inner-panel">
      <h3>Time selection</h3>
      <br>
      <select [(ngModel)]="mode" name="source" placeholder={{selectedSource}}>
        <option *ngFor="let source of sources" [value]="source">
          <h4>{{source}}</h4>
        </option>
      </select>
    </div>
  </p-overlayPanel>
</div>

<input class="input-field" (click)="op.toggle($event)">

timeselector.component.css

.inner-panel {
  width: 360px;
  padding: 10px 20px 20px 20px;
}

.my-overlay {
  position: fixed;
  background-color: white;
  box-shadow: 1px 1px 15px #888888;
  margin-top: 35px;
  right: 0.5%;
}

select {
    margin-top: 10px;
    width: 100% !important;
    z-index: 1;
}

timeselector.component.ts

import { Component, HostListener } from '@angular/core';

@Component({
    ...
})
export class TimeselectorComponent {

  public selectedSource = 'Calendar year';

  public sources  = ['Calendar year', 'Year-to-date', 'Rolling 12 months', 'Current quarter'];

   @HostListener('document:click') 
    ClickedAway() {
        console.log("inside hostlistener");
    }
}

I also read ElementRef in Angular. I'm using HostListener but I'm nor sure how to use it to serve my purpose. Please help me.

Tanzeel
  • 4,174
  • 13
  • 57
  • 110
  • 1
    I think a stackblitz will be helpful here – Nicholas K Dec 17 '19 at 08:08
  • @NicholasK. Ok I'll quickly create one. – Tanzeel Dec 17 '19 at 08:12
  • @NicholasK, https://stackblitz.com/edit/angular-pwwy99 .There it is working fine. :-( I think some other component are causing this problem in my project. – Tanzeel Dec 17 '19 at 08:20
  • Well, I guess that narrows down your problem then? Since it can't be reproduced don't think we can be of much help. – Nicholas K Dec 17 '19 at 08:23
  • 1
    As your screenshot seems not to be using a normal (styled) dropdown select I'd guess that the click (select) event is propagated to a point outside of your time selector element. – Fussel Dec 17 '19 at 08:23
  • Ok guys. Is there any way I can override those properties. As its a huge project and i don't know where it is coming from. – Tanzeel Dec 17 '19 at 08:25
  • 1
    Overriding is probably not a good idea. Try adjusting the example to reproduce the error, than someone may be able to help. – Fussel Dec 17 '19 at 08:35
  • @NicholasK. Stackblitz is not possible to create because a lot of things are coming from our organization's own libraries and frameworks. But I tried using `HostListeneter`. Can you see how can we use it correctly here. – Tanzeel Dec 19 '19 at 10:47

0 Answers0