How to handle event Order (event bubbling and capturing)


#1

I have a form with couple of text input fields and a submit button. I have handled the onBlur event of textfield and some functionality on button tap aswell. Button Tap event fires first before on blur of text field if I moves focus out from text filed to button click.
How can I order those events to make sure that onBlur of textfield fires first before tap of button?
Do I need to create customEvent on both the occasion and handles in same event listener or is there any other solution?


#2

Would you mind sharing some code that helps to understand what exactly happening.


#3

Hi @manojdcoder Here is my Code
on Top section there is one action bar where I have button

 <app-action-bar (onTap)="checkoutConfirm($event)"></app-action-bar>

=> this onTap event is getting emitted on a button click
and below I have scroll view

 <ScrollView width="100%">
        <GridLayout rows="auto auto auto">
            <TextField row="0" hint="{{invceRefHintText}}" class="input input-rounded" width="100%" autocorrect="true"
                       (blur)="onBlurofInvRef($event)" [(ngModel)]="invceRef" maxLength="66"></TextField>

            <TextField row="1" hint="{{dlvryInstructHintText}}" class="input input-rounded" width="100%" autocorrect="true"
                       (blur)="onBlurofDelInst($event)" [(ngModel)]="dlvryInstruct" maxLength="75"></TextField>

So point is whenever User clicks on button, Tap event fires first then onBlur from text field. I want onBlur of text filed first then button tap


#4

Are you calling dismiss soft input on tap of your button? Keyboard won’t hide itself until you click on return key / back button in which case blur will be the first event and then only user will be able to click on the button below.


#5

Yes, I am dismissing the keybord using utils.ad.dismissSoftInput() on button tap.
Keyboar is not an issue here. Problem is onTap button is geeting called first and onBlur of textfield second. I am suspecting it is something related to how nativescript propagates and captures the event


#6

For example if you just copy and past below code and check the console, blur will be called first and tap second

<html>
<body>

Enter your name: <input type="text" id="fname" onblur="blurFunction()">
<input type="button"  onClick="buttonFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function blurFunction() {
	console.log('blur');
    var x = document.getElementById("fname");
    x.value = x.value.toLowerCase();
}
function buttonFunction() {
	console.log('Tap');
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

But in Nativescript tap first and blur second


#7

What you are facing is absolutely expected behavior.

Desktop / Browser !== Native Mobile, in desktop you don’t have a soft input, it’s just your physical keyboard. Clicking anywhere else in the page will remove focus from textfield. But It’s not the same with iOS / Android, you are given control over soft input (keyboard) and you shall decide when to show / hide. Calling dismissSoftInput() is what triggers the blur here which you do only after clicking the button.

I’m not sure what you do in blur, you might want to rethink of your logic if it’s something important. A hot fix could be adding a timeout before executing rest of your code after calling dismissSoftInput().


#8

Hi @manojdcoder, I am still not convinced that “Calling dismissSoftInput() is what triggers the blur here which you do only after clicking the button.” Because If I dont call dismissSoftInput() and clicks anywhere outside the texfield onBlur() gets called and It does not matter that you dismiss the softinput or not. I don’t believe that it has something to do with keyboard.


#9

I’m sure that simply clicking anywhere on the page won’t hide the keyboard by default. You may test it by commenting dismissSoftInput() you have on button click.


#10

I have commented that out and yes, it is not hiding the keybord but problem still remain the same. onBLur is getting called.


#11

Which platform you are testing it now?


#12

I am using Android for now.


#13

I was not able to reproduce the issue, on my end blur event is never fired until focus is removed form the textfield which of course never happens by clicking the button. If you share a complete example code where I can reproduce the issue, I can take a look.