In the following code:
https://codepen.io/anon/pen/WYJopq
I monitor key presses and try to clone the input into another input as follows:
[![methods: {
clone: function() {
this.mirror = this.original;
}
}]
But the cloned input is always one keystroke behind:
https://i.stack.imgur.com/y2uCA.gif
How do I update my code so that the cloned input exactly matches the original input?
(Note: I know for this simple example, there's an idiomatic Vue.js way to do things, but I'm specifically interested in doing this via keystroke monitoring)
With a keyboard, we have three events fired in the following order:
keydown - fired before character inserted
keypress - fired when a character is getting inserted
keyup - fired when character is already inserted
In this scenario, if you need input with updated characters, you should use keyup event which is after the character is inserted into the input.
Having said this, you should probably use #input event as relying on the keyboard means you are not thinking about other ways via which text can be inserted into the input box. For example, copy-paste or using an on-screen keyboard:
<input type="text" v-model="original" #input="clone()" />
Related
I'm adding keyboard shortcuts to a Flutter web application.
I have a form within a custom FocusableActionDetector where the shortcut has form like this:
SingleActivator(LogicalKeyboardKey.digit2)
and action is like:
CustomActivateIntent: CallbackAction<CustomActivateIntent>(
onInvoke: (intent) { provider.value = "2"; },)
In the same form I have a couple of numeric TextFormFields. To permit writing the character "2" I have to put these text fields inside some new FocusableActionDetector, otherwise the previous detector catches the command and the text field loses the "2" character, and this is already quite weird... Moreover, after writing in any of the text fields the form focus detector doesn't work anymore.
I think this could be related to the focus system, which is yet not that clear to me.
Can anyone help find a clean solution?
I found a workaround: the FocusableActionDetector is now preceded by an if statement. The code looks like the following:
// I extract the form to a widget to make it clearer
var searchWidget = SearchWidget();
child: textEditingInProgress
? searchWidget
: FocusableActionDetector(
child: searchWidget,
...,
),
The textEditingInProgress bool is a field in a provider and is controlled by the FocusNodes belonging to the TextControllers.
Still this is not a perfect solution, in particular I'd like to understand why the previous approach was not working.
In a v-data-table, I have one column with a simple text field, this column containing the text field is sortable. The problem is that when I change the value in the text field, the data is immediately re-sorted and in my case the lines change and in the worst case the line change and the focused input changes too, like in this example: codepen reproduction
For reproduction:
click on the iron header to sort the iron column
change one input
see that the line changed its position and that you're not anymore in the same field
Expected behavior:
sort the iron column
change one input
see that the line didn't change its position and you can keep modify the input
click sort again to reorder the data once you're done.
Is there a way of behaving like in the expected behavior?
Thank you very much for the answers
It looks like you should use a different event on the <v-text-field> component to listen for changes instead of using v-model to bind changes automatically to props.items.iron. Text Field Event Docs here
You could do something like using the blur event so it only updates when your user focuses away from the text field:
<v-text-field
#blur="updateIron"
:rules="[max25chars]"
label="Edit"
single-line
counter
autofocus
></v-text-field>
then in your JS file you'd add a method like this:
methods: {
// ...other stuff here
updateIron(val) {
this.item.iron = val
}
}
Try experimenting with different events to update your values at the appropriate time.
So I found the answer to that, which consist of redefining the header:
I use the slot header.iron in order to redefine a sortIron method only on click : basic demo
What I'll have to do next is to redefine arrows, style, 'asc' and 'desc'
I'm still open to other ways of doing it!
But right now I can follow my wanted behavior which is :
sort the table via the iron column
change one field
press tab, on the next field enter a value
repeat previous step until you're done
finally re-sort the table only by clicking the header
I'm obviously missing something and hoping someone might be able to help.
I've an Interactive Grid, and a button.
When the button is pressed the dynamic action on the button has 2 steps.
Action 1 - Execute Javascript to take a value from one of the IG cells and put it into a page item.
Action 2 - Confirm Action - Are you sure you wish to delete &P10_JOB_ID.
I've made the page item, &P10_JOB_ID, visible and I can see the value has correctly been changed to the value from the IG.
I write P10_JOB_ID into a database table - I get the correct value
But the confirm message isn't picking up the correct value from P10_JOB_ID.
Namely it uses the value in P10_JOB_ID when the page starts, but then as I move around the IG pressing the button and changing the value of P10_JOB_ID, the text in the confirm message never changes.
Can anyone suggest what I might have missed, I'm baffled.
Thanks a lot
Substitutions like &P10_JOB_ID. are made when the page is rendered, not dynamically, so reflect the value at time of page load.
You will need to use Javascript to perform the conform action, something like:
apex.page.confirm ('Are you sure you wish to delete ' + $v('P10_JOB_ID') + '?', 'DELETE');
$v is an APEX Javascript function that returns the current value of a page item.
I used 'DELETE' as an example of a request value; you may want to do something different here.
Ok - having the setting of value and confirm as 2 separate actions is what causes the problem.
As per fac586
That is the expected behaviour. Static text substitutions are performed once during page show processing. They are not evaluated dynamically in the browser at runtime as values change.
Drop the second action and extend the first to display the confirm dialog using the apex.message.confirm JS API method, accessing the item value using the $v shorthand method.
at this moment I have a input field, let say it's being :value bind to a data called apiData,
which will be covered by new data from api call every 10s.
Is there any way to prevent my input field data being changed if the input field is being focused? Cos if i'm typing in the input field while new data returned, what I typed would be gone and covered by the new data.
The input field is
<input
v-on:keyup.enter="$event.target.blur()"
#focus="$event.target.value=''"
#blur="$event.target.value=oddsCell['odds']"
:value="oddsCell['odds']"
/>
You can use the #focus event handlers to set a flag which indicates that the field is being edited right now and prevent the model variable from being overwritten. And the #blur event handler to reset the flag once editing is done.
I'm automating e2e tests with Protractor on an angular app.
However, I have an issue when sending keys on input fields.
The sendKeys would miss few characters everytime so I found a workaround :
static sendKeys(value, element){
value.split('').forEach((c) => element.sendKeys(c));
}
This works well but it takes more than 3 times the time the original sendKeys function would.
Well no problem my tests are still functionnal right ?
My app now has new fields with scripts behind them.
One of them is a datepicker input, you can either choose from the datePicker or type it manually. However, for today's date you would type 09022018 and the slashes are automatically appended at the right place (like so 09/02/2018). If you were to enter a wrong date the field is cleared.
Now back to the problem : it seems that both my implementation of sendKeys and the original one loose focus after each submitted key. This means that I can't enter a valid date in the input field as it's cleared after each simulated keypress.
I could use browser.executeScript to fix it but I wouldn't be able to test the functionnality adding slashes. Also, as you type, the datepicker is still open and refreshes after each keypress, you can select a date from it at any time and that is also a feature I want to test.
Thanks in advance
Use executeScript to set the date in backgrond, then use sendKeys to enter a space or Tab at the end to trigger the Keyborad event which will check the input and format the input with slash
function enterDate(date) {
var script = 'arguments[0].value=arguments[1]';
// input box for date
var dateBox = element(by.xxx(yyy));
browser.executeScript(script, dateBox, date);
dateBox.sendKeys(" ");
// or try send Tab
dateBox.sendKeys(protractor.Key.TAB);
}
enterDate('09022018');
You can try this solution on other fields you fixed but take 3 more time.