I have an Angular (10) Material checkbox with a link in the label that has a click handler to open a dialog with reference info:
<mat-checkbox formControlName="certification">
By checking this box, I certify that all shipment information provided is correct and I agree to adhere to the
<span class="fake-link" (click)="openUspsPrivacyAgreement($event)"> USPS Privacy Act Statement </span> and all
other country-specific requirements.
</mat-checkbox>
My click handler is
openUspsPrivacyAgreement(event: MouseEvent) {
this.dialogService.open(DialogUspsPrivacyAgreementComponent);
event.preventDefault();
event.stopPropagation();
}
It works in that the dialog opens and the checkbox is not selected, which is what I want.
However, the ripple fires on the checkbox anyway. Is there a way to prevent the ripple when I click on my text but have it work when the checkbox is clicked?
I thought what I did was enough, as it does prevent the click from getting to the checkbox and checking it.
It looks like mat-checkbox ignores internal element stopPropagation. So, you could create an workaround where you add dynamic variable isRippleDisabled as boolean flag to your checkbox
<mat-checkbox formControlName="certification" [disableRipple]="isRippleDisabled">
and switch it off (true) when modal open, and back to normal, when modal close (false).
openUspsPrivacyAgreement(event: MouseEvent) {
this.isRippleDisabled = true; // set to false when dialog close
this.dialogService.open(DialogUspsPrivacyAgreementComponent);
event.preventDefault();
event.stopPropagation();
return false;
}
Add
<mat-checkbox>Checked 1</mat-checkbox>
to the app.component in the source code and it still has 'hover' effect, it could be disabled it through CSS.
The fix would be:
.mat-ripple { display: none; }
or .mat-checkbox-ripple only for checkbox
Related
in my app, the user has multiple inputs, and I use #hostListener for click outside, because I have some complicated inputs (multiple checkboxes where I first need to check everything and after call submits on click outside, IMG-MAP, etc....).
--- TEXT INPUT ---
*add some value...*
-> click outside -> Submit
--- RADIO BUTTON ---
*change option...*
-> click outside -> Submit
...etc
how to in angular 9+ prevent users to click anywhere (menu, another input ...)? If the user change the value and click anywhere or on any other part of the app ( any button, menu item, another input) submit method for changed input needs to be executed instead of that where he clicked.
I try to add event.PreventDefault(), but if we click on the menu or on another button it is not triggered submit for changed value, it is a triggered method for clicked item (menu item...).
#HostListener('document:click', ['$event'])
clickOut(event) {
event.preventDefault(); // if change val in text input and click directlly on radio button option, radio button option i changed and trigered submit for text input, and that is not ok, option in radio butoon can't be changed
this.submit()
}
why not use (blur)?
Another idea can be get the event.target as HTMLElement; and check if is inner to your form to not execute event.PreventDefault()
#ViewChild('myForm',{read:ElementRef}) formElement:ElementRef
#HostListener('document:click', ['$event'])
clickOut(event) {
const clickTarget = event.target as HTMLElement;
if (this.formElement.nativeElement.contains(clickTarget))
{
console("inside myForm")
}
else
{
console("outside myForm")
}
}
NOTE: I don't check the code (I'm in hurry), but I imagine work
I have a template
<div (click)="handler()">
<input type='checkbox' (click)="$event.stopPropagation()" (change)="$event.stopPropagation()">
</div>
and in my component here is the handler
handler() {
this.router.navigate('path');
}
I wanted do nothing on checkbox click but to route on div click.
The above solution is not working.
First argument of navigate function has to be an array
this.router.navigate(['path']);
OR
you can use navigateByUrl,
this.router.navigateByUrl('path');
Since you are using $event.stopPropagation() when you click on the checkbox, navigation won't happen but when you simply click on the div, you will be navigated to expected route.
This setup works for me:
<div (click)="onDivClick()">
<mat-checkbox (click)="$event.stopPropagation()" (change)="onCheckboxChange($event)"></mat-checkbox>
</div>
...
onDivClick() {
console.log('div clicked');
}
onCheckboxChange(event) {
console.log(event);
}
Important to note:
MatCheckboxChange event type does not have a stopPropagation() function so your example code should actually display an error in the console.
So you want the stopPropagation() only on the checkbox click.
I figured out I have a label that wraps the checkbox. So, I needed to add the click event to stop propagation at the label element
Let's say I have a collection containing 3 elements.
Each element has a corresponding remove button that I would like to initiate a POST to my server. Right now I have it setup so that when "Remove" button is pressed, a confirmation modal pops up with "yes" and "no" buttons. I am using the same modal for each element.
Problem is, when I click "yes" in modal, how can I have it know which remove button I clicked that launched the modal?
Here is a link to a gist containing the problematic code
https://gist.github.com/anonymous/85481507a1171467cae5
I have tried using a suggestion below that implements the following:
$('#hingle_dingle_0').on('click', function(e){
$('#confirmRemoveNetwork').modal('toggle', $(this));
});
$('#confirmRemoveNetwork').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
console.log(button);
});
However this returns an empty set. I can't for goodness sake figure out why it doesn't find the event.
Thanks for any help!
The modal is autoposting because you are opening it with a <button> inside a form with an input. Unless you tell it not to, this will cause a form submit. Simply set the type to button (instead of submit which is default): <button type="button">
You can capture the calling button by tapping into the event thrown when the modal is opened:
$('#confirmRemoveNetwork').on('shown.bs.modal', function (e) {
console.log(e.relatedTarget.id);
});
Finally, be sure your IDs are unique. You cannot have both "remove network" buttons using the same id of removenetworkbtn.
I'm using a checkbox and I want people to be able to check/uncheck it.
However, when they uncheck it, I'm using a jQueryUI modal popup to confirm that they really want to do that. Thus they can click OK or Cancel, and I want my checkbox to be unchecked only if they click OK.
That's why I would like to catch the uncheck event to prevent the checkbox from being visually unchecked, and uncheck it myself programmatically if the user happens to click on OK.
How could I do that ?
PS: I know I could re-check it after if the user clicks on Cancel but that would trigger the check event which I do not want.
$("#checkboxID").on("click", function (e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
// do the confirmation thing here
e.preventDefault();
return false;
}
});
Pure CSS Solution
Select Checkbox like -
input[type="checkbox"] {
pointer-events: none;
}
Works Pretty well, and now you can toggle your checkbox on any element click of your choice.
Something like:
$("#test").on('change', function() {
this.checked=!this.checked?!confirm('Really uncheck this one ?'):true;
});
FIDDLE
$("#checkboxID").click(function(e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
//check it
} else {
// prevent from being unchecked
this.checked=!this.checked;
}
});
How about using the HTML disabled property?
<input type="checkbox" name="my_name" value="my_value" disabled> My value<br>
Link:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
$("#yourCheckBoxId").on('change',function(e){
e.preventDefault();
$("#yourPopDiv").popup();
});
preventDefault() will disable default behavior of your input[type="checkbox"]
And on your popup div
$("#ok").on('click',function(){
$("#yourCheckBoxId").attr("checked",true);
});
My value
Light javascript. Better than disable if you still need the element submitted in a form.
I am using jQuery 1.3.2.
There is an input field in a form.
Clicking on the input field opens a div as a dropdown. The div contains a list of items. As the list size is large there is a vertical scrollbar in the div.
To close the dropdown when clicked outside, there is a blur event on the input field.
Now the problem is:
In chrome(2.0.172) when we click on the scrollbar, the input field will loose focus.
And now if you click outside, then the dropdown won't close(as the input has already lost focus when you clicked on the srollbar)
In Firefox(3.5), IE(8), opera(9.64), safari() when we click on the scrollbar the input field will not loose focus. Hence when you click outside (after clicking on the srollbar) the dropdown will close. This is the expected behaviour.
So In chrome once the scrollbar is clicked, and then if I click outside the dropdown won't close.
How can i fix this issue with chrome.
Well, I had the same problem in my dropdown control. I've asked Chrome developers concerning this issue, they said it's a bug that is not going to be fixed in the nearest future because of "it has not been reported by many people and the fix is not trivial". So, let's face the truth: this bug will stay for another year at least.
Though, for this particular case (dropdown) there is a workaround. The trick is: when one click on a scrollbar the "mouse down" event comes to the owner element of that scrollbar. We can use this fact to set a flag and check it in "onblur" handler. Here the explanation:
<input id="search_ctrl">
<div id="dropdown_wrap" style="overflow:auto;max-height:30px">
<div id="dropdown_rows">
<span>row 1</span>
<span>row 2</span>
<span>row 2</span>
</div>
</div>
"dropdown_wrap" div will get a vertical scrollbar since its content doesn't fit fixed height. Once we get the click we are pretty sure that scrollbar was clicked and focus is going to be taken off. Now some code how to handle this:
search_ctrl.onfocus = function() {
search_has_focus = true
}
search_ctrl.onblur = function() {
search_has_focus = false
if (!keep_focus) {
// hide dropdown
} else {
keep_focus = false;
search_ctrl.focus();
}
}
dropdow_wrap.onclick = function() {
if (isChrome()) {
keep_focus = search_has_focus;
}
}
That's it. We don't need any hacks for FF so there is a check for browser. In Chrome we detect click on scrollbar, allow bluring focus without closing the list and then immediately restore focus back to input control. Of course, if we have some logic for "search_ctrl.onfocus" it should be modified as well. Note that we need to check if search_ctrl had focus to prevent troubles with double clicks.
You may guess that better idea could be canceling onblur event but this won't work in Chrome. Not sure if this is bug or feature.
P.S. "dropdown_wrap" should not have any paddings or borders, otherwise user could click in this areas and we'll treat this as a scrollbar click.
I couldn't get these answers to work, maybe because they are from 2009. I just dealt with this, I think ihsoft is on the right track but a bit heavy handed.
With two functions
onMouseDown() {
lastClickWasDropdown=true;
}
onBlur() {
if (lastClickWasDropdown) {
lastClickWasDropdown = false;
box.focus();
} else {
box.close();
}
}
The trick is in how you bind the elements. The onMouseDown event should be on the "container" div which contains everything that will be clicked (ie, the text box, the dropdown arrow, and the dropdown box and its scroll bar). The Blur event (or in jQuery the focusout event) should be bound directly to the textbox.
Tested and works!
I was facing the same situation/problem and I tested the solution from "ihsoft" but it has some issues. So I worked on an alternative for that and made just one similar to "ihsoft" but one that works. here is my solution:
var hide_dropdownlist=true;
search_ctrl.onblur = function() {
search_has_focus = false
if (hide_dropdownlist) {
// hide dropdown
} else {
hide_dropdownlist = true;
search_ctrl.focus();
}
}
dropdow_wrap.onmouseover = function() {
hide_dropdownlist=false;
}
dropdow_wrap.onmouseoout = function() {
hide_dropdownlist=true;
}
I hope this will help someone.
Earlier also I faced such situation and this is what I have been doing.
$('html').click(function() {
hasFocus = 0;
hideResults();
});
and on the input field i will do this
$('input').click()
{
event.stopPropagation();
}
So this will close the drop down if clicked anywhere outside the div (even the scrollbar).
But I thought if someone could provide a more logical solution.
Could you maybe set the blur event to fire on the drop down div as well? This way, when either the input or the drop down loses focus, it will dissapear...
I'm curious...
You're using the last version of every browser, why don't you try it in chrome 4.0.202?
instead of detecting the blur, detect the document.body or window click and grab the mouse point. determine if this mouse point is outside of the menu box. presto, you've detected when they clicked outside the box!
I solved this by doing the following:
#my_container is the container which has the "overflow: auto" CSS rule
$('#my_container')
.mouseenter(function(){
// alert('ctr in!');
mouse_in_container = true;
})
.mouseleave(function(){
// alert('ctr out!');
mouse_in_container = false;
});
And then:
$('input').blur(function(){
if(mouse_in_container)
return;
... Normal code for blur event ...
});
When I select an element in the drop down, I rewrite the code as:
(>> ADDED THIS) mouse_in_container=false;
$('input').attr('active', false); // to blur input
$('#my_container').hide();