how to close mat select when click outside

Question

By default it should show the value if a user click the cell it will show the input field , if the user click outside will close the input field and will show the field value.

My issue is how do we made this possible to mat select and mat date picker . Any idea guys ? Thanks.

#blitz https://stackblitz.com/edit/am-all-imports-4r6aik?file=app%2Fapp.component.html

#Ts

  edit(index: number, column: string) {
    this.editableColumn = column;
    this.editableIndex = index;
  }

  showInput(index: number, column: string) {
    return this.editableColumn === column && this.editableIndex === index;
  }

  showValue(index: number, column: string) {
return this.editableColumn !== column || this.editableIndex !== index;
  }

If you mean removing the focus means on blur method then you can get the solution here. https://stackoverflow.com/questions/34918198/how-to-use-onblur-event-on-angular2 — Nikhil, Sep 02 '22 at 02:15
Hi @Nikhil , how about date picker and select menu Sir ? how do we do that ? — Mark Latin, Sep 02 '22 at 02:17
blur only works on input field how abot select menu ang mat date picker? — Mark Latin, Sep 02 '22 at 02:20
If you are using the form then you can set the default value of the date picker, if the user selects the date then the date picker value would be set to the selected date. The same goes with the select menu, provide a default value, if the user selects the value from the menu then it will be selected, or else the default value will be selected. — Nikhil, Sep 02 '22 at 02:22

Naren Murali · Accepted Answer · 2022-09-02T12:36:29.660

1

Updated answer

use a custom directive to make the focus happen! then the solution will work!

directive

import { ElementRef } from '@angular/core';
import { Directive } from '@angular/core';

@Directive({
  selector: '[appFocusOnLoad]',
})
export class FocusOnLoadDirective {
  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    if (this.elementRef) {
      this.elementRef.nativeElement.focus();
    }
  }
}

forked stackblitz

Below is an example of using blur for select and datepicker, select works great but for datepicker, you need to combine dateChange and blur to get the blur event during select and focus out!

html

<mat-form-field appearance="fill">
  <mat-label>Input & change events</mat-label>
  <input
    matInput
    [matDatepicker]="picker"
    (blur)="blur()"
    (dateChange)="blur()"
  />
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field>
  <mat-select (blur)="blur()" placeholder="Fav Animal">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- Copyright 2022 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license -->

ts

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

/** @title Basic datepicker */
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
})
export class DatepickerOverviewExample {
  constructor() {}

  options = ['Cat', 'Dog', 'Lion'];
  selectedCountry: string = 'GB';

  selectedCountryControl = new FormControl(this.selectedCountry);

  blur() {
    console.log('blurred');
  }
}

/**  Copyright 2022 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at https://angular.io/license */

forked stackblitz

edited Sep 02 '22 at 12:36

answered Sep 02 '22 at 07:47

Naren Murali

19,250
3
27
54

Hi Sir , but how this works on a table ? – Mark Latin Sep 02 '22 at 10:47
@MarkLatin use this on all the editor rows and set this.editableIndex and this.editableColumn to null so that edit is turned off during blur, that is the requirement right – Naren Murali Sep 02 '22 at 10:50
Another question Sir , how about for input fields ? how do we handle that ? – Mark Latin Sep 02 '22 at 11:11
cause as you can see right now if you go to my blitz and click for example one cell in weight the input field does not close when you click outside – Mark Latin Sep 02 '22 at 11:12
@MarkLatin updated my answer! – Naren Murali Sep 02 '22 at 11:42
Sir , on your blitz example https://stackblitz.com/edit/am-all-imports-9efsm1 , can you please add both input field , mat select and mat date picker ? I jsut wanna see all of them in an example. If you dont mind , thank you. – Mark Latin Sep 02 '22 at 11:53
@MarkLatin Please try yourself! – Naren Murali Sep 02 '22 at 11:55
I tried adding the blur to the mat select but it does not seem to work when I click outside – Mark Latin Sep 02 '22 at 11:57
please see my current progress https://stackblitz.com/edit/am-all-imports-nlh3t2?file=app%2Fapp.component.html,app%2Fapp.component.ts – Mark Latin Sep 02 '22 at 11:59
@MarkLatin Please find the updated [stackblitz](https://stackblitz.com/edit/am-all-imports-65vtbu) – Naren Murali Sep 02 '22 at 12:36

how to close mat select when click outside

1 Answers1

Updated answer