I would like the following method to be run:
setHeroButtonTextOption(heroButtonText) {
this.builderComponentsService.setPageComponentById(this.componentId, 'heroButtonText', heroButtonText);
}
Each time the user loses focus of the following element:
<div class="builder-components hero-button-click button-outer-container text-center text-md-left mt-5">
<div (click)="selectHeroButton($event, componentId + '-button')"
[attr.data-cy]="'hero-button-container'" [class]="setActiveElement('button')"
[ngClass]="setHeroClass('hero-button')" class="builder-components hero-button-click button-container"
id="{{componentId}}-button" style="display:inline-block">
<button [attr.data-cy]="'hero-button'" [ngStyle]="heroButtonStyle"
class="builder-components hero-button-click btn hero-button">
<span (blur)="removeLineBreaks($event); setHeroButtonTextOption($event.target['innerText']);"
(keydown.enter)="setHeroButtonTextOption($event.target['innerText']); $event.preventDefault()"
[attr.contenteditable]="setContentEditable()" [attr.data-cy]="'hero-button-text'"
[innerText]="heroButtonText" class="builder-components hero-button-click">
</span>
</button>
</div>
</div>
Currently, it isn't happening even though I have a blur event on <span>. How can I fix this?
The blur event will be raised from the button, not the span. If you are trying to include the innerText of the span with the event handler, it looks like it is already bound with heroButtonText, which you can pass as a function argument or reference from the component.
<button (blur)="setHeroButtonTextOption(heroButtonText)">
<span>{{ heroButtonText }}</span>
</button>
Edit - The button should be emitting that blur event. If that isn't working you will need to post more code, it could be that removeLineBreaks($event) is throwing an error, preventing the next call from being made.
Related
I have a modal that looks something like this:
<div className="modal modal-focuser" tabindex="1" style="z-index: 5;">
<div className="handle-modal-close"></div>
<div className="modal-content modal-content">
<div className="body">
<span>
<div className="container">
<div className="title-text">Title Text</div>
<div className="body-text">Body Text</div>
</div>
<button onClick={this.toggleView} className="toggle-view">Switch View</button>
</span>
</div>
</div>
</div>
With the click code like the following:
toggleView = e => {
e.stopPropagation();
this.setState(prevState => ({ view: !prevState.view}));
}
But for some reason (despite the stop propagation), when I click the button, sometimes the parent's event handlers are still being activated.
That is, there is a table behind the modal with click-able rows, and when I click the Toggle button in the modal, not only is that button clicked, but also the table row behind the behind (which also has its own click event handlers)
The stranger thing is that this only sometimes happens, and only happens on mobile. Try as I might, I can't replicate the behavior on my PC in Chrome or Firefox.
What could be causing this?
You're using the onclick handler, which essentially ignores all the propegation through down-up events. Try using onmousedown. Chances are the thing underneath the modal has a down or up event. Learn about "bubbling" : What is event bubbling and capturing?
<button onMouseDown={this.toggleView} ... yada yada
Using the mousedown will allow you to prevent bubbling through the stopPropegation, and maybe also look into stopImmediatePropegation -- which prevents other listeners of the same type (click, down, up) from getting called: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation
As you can see in the code, there are two onClick() methods. Both appear on the UI. But when I click on the second onClick() method, it doesn't call the method but the first one calls. I am not able to understand why this is happening. Please help.
<div class="col-sm-12 text-right mrg-top-15">
<div class="action-btns text-right flex">
<span class="icon-pending"></span>
<vh-button [type]="'trash'" (onClick)="navigateToHRA()" class="mrg-lft-10" id="icd-delete"></vh-button>
</div>
<button (onClick)="navigateToHRA()" class="btn btn-primary">{{'LookUpButtonText'|translate}}</button>
</div>
You need to use (click) when using Angular's click event.
<button (click)="navigateToHRA()" class="btn btn-primary">{{'LookUpButtonText'|translate}}</button>
The other (onClick) event is most probably the output event emitter of vh-button component/directive.
You have to use (click) on the button instead of (onClick) because that event does not exist on the native button.
Fiddle: http://jsfiddle.net/0o1mrapd/20/
Angular stackblitz link: https://stackblitz.com/edit/angular-fhtaki?file=src%2Fapp%2Fapp.component.html
I have a complex case which i need some enlightenment. (For angular developers, you can think the wrapper div as a host selector, <my-button></my-button>)
As you can see in the fiddle I have a disabled button with a wrapper div which has a click event.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span>Click</span>
</button>
</div>
What I expect is that when I click on that area, nothing will happen but alas I get the alert. If I remove the span element and put plain text inside the button, this works.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
Click
</button>
</div>
How can I make the div unclickable in this case? I found out that pointer-events: none does the trick but then I lose the curser-event which I need for accessibility
I stumbled upon this issue while creating a custom button component with an ng-content in Angular but then realized this is bigger than the framework.
Some links i checked:
Can you prevent an Angular component's host click from firing?
Add CSS cursor property when using "pointer-events: none"
How to stop event propagation with inline onclick attribute?
https://github.com/angular/angular/issues/9587
Maybe this example will be useful
function clickHandler() {
console.log('Click');
}
<div onclick="return false;">
<button onclick="clickHandler()">
Click
</button>
</div>
You can use this css property to avoid click event be fired in the span tag. It could be a workaround.
<div onclick="alert('hey')" style="display:inline-block">
<button disabled>
<span style="pointer-events:none;">Click</span>
</button>
</div>
I have a div with a button inside of it that minimizes the div. If you click anywhere else inside the div it will load details about the div. However, I don't want to load details if minimizing the div. Here is my code:
<div (click)="showDetails(key)" *ngFor="let key of keys">
<button (click)="minimize(key)">Minimize</button>
<span>The rest of the content is here</span>
</div>
When minimize is triggered, I want to ignore showDetails.
I'm not able to test it right now, but what you could try is
(click)="minimize(key, $event)"
In your component
minimize(key, event) {
event.preventDefault();
event.stopPropagation();
}
Try with either one of them and see how it goes !
what you have to do is to ignore the parent click event by stopping the propagation of the event using stopPropagation()
html code :
<div (click)="showDetails(key)" *ngFor="let key of keys">
<button (click)="minimize(key,$event)">Minimize</button>
<span>The rest of the content is here</span>
</div>
ts code :
minimize(key,event){
event.stopPropagation();
}
use event.stopPropagation()
to prevent the click event from bubbling up the DOM.
What i did here to get around it pretty simple where you do not need create the function/method.
<div (click)="showDetails(key)" *ngFor="let key of keys">
<button (click)="$event.stopPropagation()">Minimize</button>
<span>The rest of the content is here</span>
</div>
Hope this helps!
So I've been looking around for an answer for this but I just couldn't find the answer. So what I have is a ng-repeat of items that are in a particular class="list-items". When I click on each of the item in items, it should execute a function. Within each list I have an remove button which I would like to remove the item when clicked.
So some code for reference:
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index)">X</button>
</div>
So I did right now, in my CSS, i tried using an position absolute on the button and a z-index of like 10000 to show that it is greater than, but when I click the removeItem button, it still calls the executeCallback function. I don't want it to call the executeCallback function.
Is there a way to have the removeItem function be called only when the remove button is clicked and not the parent class?
You can add multiple events in one ng-click.
<div ng-click="executeCallback($index)" class="list-items">
<div class="item-info">
<span>some info here</span>
</div>
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>
Directives like ngClick and ngFocus expose a $event object within the scope of that expression. The object is an instance of a jQuery Event Object when jQuery is present or a similar jqLite object. Source
You can use this, directly in the HTML template, to stop its propagation by calling $event.stopPropagation(). Just add it on the button and you should be fine:
<button ng-click="removeItem($index);$event.stopPropagation()">X</button>