Styjun

Three phase systems - are there any single phase devices that are connected between two phases instead of between one phase and neutral?

Soft constraints and hard constraints

What does "play in traffic" mean?

You have no, but can try for yes

Why didn't Balak request Bilam to bless his own people?

ISCSI, multiple initiaros for the same lun

She told me that she HAS / HAD a gun

How does the Gameboy's memory bank switching work?

Killing a star safely

A bicolour masyu

How does mathematics work?

Router restarts after big git push or big file upload

What is the difference between uniform velocity and constant velocity?

Improving an O(N^2) function (all entities iterating over all other entities)

"move up the school" meaning

Three Subway Escalators

Grease/lubricate rubber stabilizer bar bushings?

What does Windows' "Tuning up Application Start" do?

How can electronics on board JWST survive the low operating temperature while it's difficult to survive lunar nights?

A Real World Example for Divide and Conquer Method

Inside Out and Back to Front

ESTA Travel not Authorized. Accepted twice before!

Do I care if the housing market has gone up or down, if I'm moving from one house to another?

Quickest way to move a line in a text file before another line in a text file?

How to get click event on input within mat-form-field?

How can I create an additional placeholder attribute using Angular4?Angular2 material - need indication that mat-autocomplete value was selected by mouse clickWhat is the difference between “mat-form-field” and “mat-input-container”Placeholder in mat-autoComplete does not work as illustrated in the Angular Material DocumentationChange Mat form field Input colormat-autocomplete auto-hide placeholder text on input focusIssue with CSS for mat-input and mat-form-fieldmat autocomplete for a non-async dataAngular 5 - Material Angular - Inputs reacting very slowly to typingAdjusting height of mat-form-field Angular Material

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I want to clear my selected option when click on the autocomplete button:

 <mat-form-field class="example-full-width" (click)="clear()" appearance="outline">
 <input matInput placeholder="State" aria-label="State" 
 [matAutocomplete]="auto" [formControl]="stateCtrl">
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option *ngFor="let state of filteredStates | async" 
 [value]="state.name">
 </mat-option>
 </mat-autocomplete>
 </mat-form-field> 

But click called even when you press a little below.(there is margin within the form)

Example showing input clear by clicking outside

angular angular-material

share|improve this question

edited Mar 26 at 13:33

Abhishek Kumar

1,60344 silver badges1818 bronze badges

asked Mar 26 at 12:35

yantrabyantrab

50766 silver badges2020 bronze badges

add a comment | 

1

I want to clear my selected option when click on the autocomplete button:

 <mat-form-field class="example-full-width" (click)="clear()" appearance="outline">
 <input matInput placeholder="State" aria-label="State" 
 [matAutocomplete]="auto" [formControl]="stateCtrl">
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option *ngFor="let state of filteredStates | async" 
 [value]="state.name">
 </mat-option>
 </mat-autocomplete>
 </mat-form-field> 

But click called even when you press a little below.(there is margin within the form)

Example showing input clear by clicking outside

angular angular-material

share|improve this question

edited Mar 26 at 13:33

Abhishek Kumar

1,60344 silver badges1818 bronze badges

asked Mar 26 at 12:35

yantrabyantrab

50766 silver badges2020 bronze badges

add a comment | 

I want to clear my selected option when click on the autocomplete button:

 <mat-form-field class="example-full-width" (click)="clear()" appearance="outline">
 <input matInput placeholder="State" aria-label="State" 
 [matAutocomplete]="auto" [formControl]="stateCtrl">
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option *ngFor="let state of filteredStates | async" 
 [value]="state.name">
 </mat-option>
 </mat-autocomplete>
 </mat-form-field> 

But click called even when you press a little below.(there is margin within the form)

Example showing input clear by clicking outside

angular angular-material

share|improve this question

edited Mar 26 at 13:33

Abhishek Kumar

1,60344 silver badges1818 bronze badges

asked Mar 26 at 12:35

yantrabyantrab

50766 silver badges2020 bronze badges

 <mat-form-field class="example-full-width" (click)="clear()" appearance="outline">
 <input matInput placeholder="State" aria-label="State" 
 [matAutocomplete]="auto" [formControl]="stateCtrl">
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option *ngFor="let state of filteredStates | async" 
 [value]="state.name">
 </mat-option>
 </mat-autocomplete>
 </mat-form-field> 

angular angular-material

angular angular-material

share|improve this question

edited Mar 26 at 13:33

Abhishek Kumar

1,60344 silver badges1818 bronze badges

asked Mar 26 at 12:35

yantrabyantrab

50766 silver badges2020 bronze badges

share|improve this question

edited Mar 26 at 13:33

Abhishek Kumar

1,60344 silver badges1818 bronze badges

asked Mar 26 at 12:35

yantrabyantrab

50766 silver badges2020 bronze badges

edited Mar 26 at 13:33

Abhishek Kumar

1,60344 silver badges1818 bronze badges

edited Mar 26 at 13:33

Abhishek Kumar

1,60344 silver badges1818 bronze badges

asked Mar 26 at 12:35

yantrabyantrab

50766 silver badges2020 bronze badges

asked Mar 26 at 12:35

yantrabyantrab

50766 silver badges2020 bronze badges

2 Answers
2

active

oldest

votes

2

Use (click)="clear()" on <input> tag,
and not on mat-form-field tag.

Add the following to styles.css to overwrite css and make input tag cover the container full height.

.mat-form-field-appearance-outline .mat-form-field-infix 
 padding: 0 !important;
 border-top: 0;

input.mat-input-element 
 padding: 1.84375em 0 1em 0;

Stackblitz Demo - only clear from input click

share|improve this answer

edited Mar 26 at 13:05

answered Mar 26 at 12:41

Abhishek KumarAbhishek Kumar

1,60344 silver badges1818 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already try it, but then you need to click exactly on input, that smaller than box...
  
  – yantrab
  Mar 26 at 12:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @yantrab please check the updated link, now input height is adjusted.
  
  – Abhishek Kumar
  Mar 26 at 13:06
  

  
  
  
  

add a comment | 

0

I found a way without changing the style, just by add event click to mat-form-field-flex

document
 .querySelectorAll('p-autocomplete .mat-form-field-flex')[0]
 .addEventListener('click', (ev) => this.clear(ev));

share|improve this answer

answered Mar 26 at 13:54

yantrabyantrab

50766 silver badges2020 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55357356%2fhow-to-get-click-event-on-input-within-mat-form-field%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

Use (click)="clear()" on <input> tag,
and not on mat-form-field tag.

Add the following to styles.css to overwrite css and make input tag cover the container full height.

.mat-form-field-appearance-outline .mat-form-field-infix 
 padding: 0 !important;
 border-top: 0;

input.mat-input-element 
 padding: 1.84375em 0 1em 0;

Stackblitz Demo - only clear from input click

share|improve this answer

edited Mar 26 at 13:05

answered Mar 26 at 12:41

Abhishek KumarAbhishek Kumar

1,60344 silver badges1818 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already try it, but then you need to click exactly on input, that smaller than box...
  
  – yantrab
  Mar 26 at 12:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @yantrab please check the updated link, now input height is adjusted.
  
  – Abhishek Kumar
  Mar 26 at 13:06
  

  
  
  
  

add a comment | 

2

Use (click)="clear()" on <input> tag,
and not on mat-form-field tag.

Add the following to styles.css to overwrite css and make input tag cover the container full height.

.mat-form-field-appearance-outline .mat-form-field-infix 
 padding: 0 !important;
 border-top: 0;

input.mat-input-element 
 padding: 1.84375em 0 1em 0;

Stackblitz Demo - only clear from input click

share|improve this answer

edited Mar 26 at 13:05

answered Mar 26 at 12:41

Abhishek KumarAbhishek Kumar

1,60344 silver badges1818 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I already try it, but then you need to click exactly on input, that smaller than box...
  
  – yantrab
  Mar 26 at 12:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @yantrab please check the updated link, now input height is adjusted.
  
  – Abhishek Kumar
  Mar 26 at 13:06
  

  
  
  
  

add a comment | 

Use (click)="clear()" on <input> tag,
and not on mat-form-field tag.

Add the following to styles.css to overwrite css and make input tag cover the container full height.

.mat-form-field-appearance-outline .mat-form-field-infix 
 padding: 0 !important;
 border-top: 0;

input.mat-input-element 
 padding: 1.84375em 0 1em 0;

Stackblitz Demo - only clear from input click

share|improve this answer

edited Mar 26 at 13:05

answered Mar 26 at 12:41

Abhishek KumarAbhishek Kumar

1,60344 silver badges1818 bronze badges

.mat-form-field-appearance-outline .mat-form-field-infix 
 padding: 0 !important;
 border-top: 0;

input.mat-input-element 
 padding: 1.84375em 0 1em 0;

share|improve this answer

edited Mar 26 at 13:05

answered Mar 26 at 12:41

Abhishek KumarAbhishek Kumar

1,60344 silver badges1818 bronze badges

answered Mar 26 at 12:41

Abhishek KumarAbhishek Kumar

1,60344 silver badges1818 bronze badges

answered Mar 26 at 12:41

Abhishek KumarAbhishek Kumar

1,60344 silver badges1818 bronze badges

0

I found a way without changing the style, just by add event click to mat-form-field-flex

document
 .querySelectorAll('p-autocomplete .mat-form-field-flex')[0]
 .addEventListener('click', (ev) => this.clear(ev));

share|improve this answer

answered Mar 26 at 13:54

yantrabyantrab

50766 silver badges2020 bronze badges

add a comment | 

0

I found a way without changing the style, just by add event click to mat-form-field-flex

document
 .querySelectorAll('p-autocomplete .mat-form-field-flex')[0]
 .addEventListener('click', (ev) => this.clear(ev));

share|improve this answer

answered Mar 26 at 13:54

yantrabyantrab

50766 silver badges2020 bronze badges

add a comment | 

I found a way without changing the style, just by add event click to mat-form-field-flex

document
 .querySelectorAll('p-autocomplete .mat-form-field-flex')[0]
 .addEventListener('click', (ev) => this.clear(ev));

share|improve this answer

answered Mar 26 at 13:54

yantrabyantrab

50766 silver badges2020 bronze badges

document
 .querySelectorAll('p-autocomplete .mat-form-field-flex')[0]
 .addEventListener('click', (ev) => this.clear(ev));

share|improve this answer

answered Mar 26 at 13:54

yantrabyantrab

50766 silver badges2020 bronze badges

answered Mar 26 at 13:54

yantrabyantrab

50766 silver badges2020 bronze badges

answered Mar 26 at 13:54

yantrabyantrab

50766 silver badges2020 bronze badges