In order to trim the content of the Draft.js Editor, the following answer works with the onClick event: Draft.js - How to trim contents
However, I'm unable to make it work with the onBlur event.
In both cases it reaches the method, but only when clicking on the button it performs a trimming of the content.
You can reproduce this problem in the following JSFiddle: https://jsfiddle.net/pnfgrhqz/1/
If you add spaces at the beginning and then click the button, it will trim the content, however, if you do the same and then click out of focus, the trimContent method is also triggered, but the content will not be trimmed.
Any idea what am I missing here?
You have two options. you can either call the trimmer with a setTimeout
trimOnBlur = () =>{setTimeout(this.trimContent , 0);}
https://jsfiddle.net/bsv3oegr/1/
or add the onBlur event on the parent div and make it focusable with tabIndex.
tabIndex="0" onBlur={this.trimContent}
https://jsfiddle.net/8rtcgqkb/
Related
I have a contenteditble div, that I want to reset on blur if it's empty (i.e. if you delete everything and then click outside, it will discard the changes).
If you delete everything but retain focus, then I want it to show a placeholder.
The code below is almost working, but when I delete the last character in the contenteditble div, it's firing the ng-blur event, even though the div still has focus.
<div ng-model="question.QuestionTitle" contenteditable placeholder="Add Question Title"
ng-blur="saveQuestionnaireTitle(question)"></div>
So, when you delete the last character in the div, the placeholder shows for a split second, and then my code inside "saveQuestionnaireTitle" fires, which checks for an empty string repopulates the box - so even though the user hasn't clicked out of the box.
The div appears to loose then quickly regain focus.
Any ideas?
We use textboxes on celltemplates instead using an editableCellTemplate.
http://plnkr.co/edit/M8Do1p?p=preview
<input class="grid_textbox text-center"
ng-blur="grid.appScope.quantityChanged(row.entity)"
ng-model="MODEL_COL_FIELD" style="width:80%"/>
We identify changes by catching ng-blur on the textboxes. However, we noticed that when the textbox is out of view when the user scrolls, it does not trigger the ng-blur on the correct textbox.
To reproduce in plnkr
Click on first textbox.
Click on the second textbox, this will display info on the Blur event. This is the expected behavior
To reproduce the error, click Clear and click on the first textbox again.
Scroll down until up to mid-bottom and click on a textbox. It won't output the same message as above.
Is there a way to fix this or a workaround to get the row that was edited?
Update:
I've tried Guranjan's solution and it worked, but another problem came up. I'm not sure if this should be another question but it's still related to scrolling and blur.
To replicate
Click on 1st textbox and input a number
Scroll until it's out of view.
Click on another textbox and edit.
This time just scroll. You can see the cursor focusing on other textboxes and not triggering blur.
Edit one. Then scroll again (mouse wheel or dragging scrollbar). Edit then scroll.
Click on one textbox to trigger blur. It will not display all of the edits.
This is the plunker of Guranjan to try it.
http://plnkr.co/edit/RWM2y7NLC7821c9vQDO6?p=preview
This is because ui-grid reuses the elements. One way to fix your issue is, store the value of current row on focus and use that on blur. For example, create variable in you app scope:
$scope.currentValue = {};
and then you can update this on input focus:
ng-focus="grid.appScope.currentValue = row.entity"
and you can then use $scope.currentValue to do whatever you need to do with it.
Updated Plnkr
I think this code is having some problem. Because when I click on a tag to remove it, the click event will propagate to host div which results in focusing the input box.
Is there a way or any attribute that will prevent the input box from getting focused on removing a tag?
I have a form wih many fields in it and a close button at the end. Only in IE, when I tab out of the button, instead of going to the first field in the form, it tabs to the browser url and then to the tabs open in browser and home icon and all browser icons on the top. So, what I want to do is to catch the tab event on close button and bring the focus back to the first field in the form. So, I tried using specialkey, keyup and keydown in the listeners for the button. But, none of them were called when tab event was fired on button. I have enablekeyevents:true in the configuration. Can someone suggest me a way of capturing the tabout event on button. Thank you so much.
I solved it by using blur event on button. I check on blur whether Ext.EventObject.Tab and Ext.EventObject.shiftKey exists
Demo Fiddle
I'd like to show some help text using a popover for the entire group of fields, not for each individual input.
In the fiddle, I'm simply using a mouseenter trigger to show how it should look like, but what I really want is to trigger it on focus for any input, but have the popover be positioned based on the parent element.
In non-angular land, I'd trigger a custom event (say groupenter) when any one of the fields is in focus, and have the popover listen to that event. I'd also debounce the corresponding groupleave event so the popover won't flicker as I tab around the inputs.
What's an angular-y way to accomplish that here?
(I think this patch helps, but it just got committed days ago)
Got it working!
I had to fork tooltip.js to add 'groupenter': 'groupleave' to triggerMap since there's no public api to add to the map.