We Keep Coding

Windows.alert() preventing access/data entry into text input field in electron-react app. What is the best way to handle windows.alert?

I have a text input field in an electron-react app. The windows.alert() was being used to through an alert on altering a state given a certain condition. But after throwing the alert, an input text field in a completely separate form would not allow the user to enter data without clicking out of the application and then back in.
I do currently have a work around, which was throwing the alert using electron's ipcRenderer and ipcMain, but the style does not match well with the rest of the application. Is there a way to handle windows.alert() that does not block data entry into text input fields? What causes windows.alert() to block entering data into text input?
Code Example Before:
function doSomething(value) {
let array = otherArray;
if (array.length == 0) {
//The below was blocking typing into <input> in a completely separate form.
window.alert("Please add expected value first")
}
}
Work around code with ipcRenderer from preload.js and ipcMain:
function doSomething(value) {
let array = otherArray;
if (array.length == 0) {
window.api.send("send-alert", "Please add expected value first")
}
}
//in main.js
ipcMain.on("send-alert", (event, incomingMessage)=> {
let options = {
message: incomingMessage
}
dialog.showMessageBox(mainBrowserWindow, options)
}

Use toastr to walk around this.
Read this: https://github.com/CodeSeven/toastr
Trigger an error or warning message in place of the window.alert() method. Ie:
toastr.warning() or toastr.error()

Why do vuelidate validators no longer react to input changes?

I have a problem regarding form validation with vuelidate. I’m using Vue 2.9.6 with vuelidate 0.7.5
I recommend opening this jsfiddle while reading my problem description:
jsfiddle.net/Philgarth/h5v7km2s/
(SO prevents me from posting the link properly, sorry .... just prepend "https://")
I’m developing an account book for private bank accounts and currently I’m working on the depositor-form-component, where users can add new depositors. Each depositor must have a name and at least one bank account to submit the depositor-form and return to the account-view-component.
As you can see in the jsfiddle I have a textfield for the name and a dropdown for the accounts which initially is empty and disabled. A new account can be drafted by clicking the „+“-button besides the dropdown. With „drafted“ I mean, that the account in the finished app shouldn’t get posted to the database right away. Because users should be able to create multiple accounts for a depositor only the finished and validated depositor-object with one ore more accounts is sent to the database by submitting the whole depositor-form.
While a new account is drafted, the variable „pendingAccountCreation“ is set to true, which is why the account fields are displayed via „v-if“ as well as two buttons to submit or discard the account data.
When clicking on either of these buttons, the validation-object „updatedAccount“ should be resetted, so that by drafting another account the fields neither are dirty nor have errors.
Now the problem is, that the validators don’t react to changes to the input field in some cases – e.g. „required“ remains false although the input field is not empty.
I made some tests and could determine that the error only occurs, when an account-draft is discarded by clicking the „x“-button while no other accounts are already created. As soon as at least one account is created and available in the dropdown everything works as expected and the validators react to input changes when drafting another account.
Now if you want to help me I ask you to reproduce the error in the jsfiddle and try to figure out, what I’m doing wrong here.
Thanks in advance and have a nice day 😊

Change this code:
discardAccountDraft(accountValidator) {
accountValidator.$reset();
this.selectedAccountIndex = 0;
if (this.updatedDepositor.accounts.length !== 0) {
this.selectedAccount = this.updatedDepositor.accounts[0];
this.updatedAccount = this.cloneObject(this.selectedAccount);
} else {
this.updatedAccount = this.cloneObjectModel;
}
this.pendingAccountCreation = false;
},
to this code (jsfiddle):
discardAccountDraft(accountValidator) {
accountValidator.$reset();
this.selectedAccountIndex = 0;
if (this.updatedDepositor.accounts.length !== 0) {
this.selectedAccount = this.updatedDepositor.accounts[0];
this.updatedAccount = this.cloneObject(this.selectedAccount);
} else {
this.updatedAccount = this.cloneObjectModel({
id: "",
accountNumber: "",
iban: "",
bic: "",
accountDescription: "",
});
}
this.pendingAccountCreation = false;
},
I've just added empty model to your cloneObjectModel function, because it expects one... And this fixed the problem you mentioned:
error only occurs, when an account-draft is discarded by clicking the „x“-button while no other accounts are already created

Adaptive Card clears input on submit

From a Microsoft Teams bot I send an Adaptive Card with input fields and a Submit action. When the user clicks Submit I receive the data entered but the form fields are cleared.
Why is this? What am I doing wrong? This behavior is extremely annoying as I can't verify the input and ask the user to correct it.
This happens in the desktop Teams app, Teams in a browser, Teams webchat in a web page and the Bot Emulator. In the Emulator it suffices for the field to loose focus.
In case it matters I use nodejs.

You're not doing anything wrong. That's just how Adaptive Cards work in Teams, perhaps as a way to signify that the data has been sent to the bot successfully. There may be something you can do to fix your problem though.
Adaptive Card input fields have a value property that allows you to specify the field's initial value. If you send a card to the user and the input fields' value properties are populated, the fields won't be empty. This means you can send such a card as an update instead of a new activity and it will look like the card has been modified in place, since Teams supports updating activities. If the update uses the same card but with the values the user entered then it will look like the card remains unchanged, which would fix your problem of the values disappearing.
There was a question about dynamically adding input fields to Adaptive Cards, and the answer contains sample code that preserves input field values:
var inputId = `text${i}`;
body.push({
type: "Input.Text",
id: inputId,
value: cardData[inputId] // This is where the value is preserved
});
If you want this whole process to be made easier with prebuilt code that you can install in NuGet packages, feel free to voice your support for these ideas on GitHub:
Bot.Builder.Community.AdaptiveCards
AdaptiveCard Prompt

While I was waiting for an answer to my question I came pretty much to the same conclusion as Kyle Delaney outlined above, you have to resend the data entered.
So I started to fiddle with my code and came up with this solution, not sure this is the best way.
As part of a waterfall step:
async W2_showCard(step) {
const card = CardFactory.adaptiveCard(this.makeFormCard());
return await step.prompt('formPrompt', { prompt: MessageFactory.attachment(card) });
}
The trick is in formPrompt which also ensures the user submits the form instead of doing something else.
// Workaround to make user click Submit or cancel dialog
this.dialogs.add(new ActivityPrompt('formPrompt', async prompt => {
const recognizedValue = prompt.recognized.value;
if (recognizedValue.type === ActivityTypes.Message) {
if (recognizedValue.value) {
const replyToId = recognizedValue.replyToId;
var oldCard = prompt.options.prompt.attachments[0];
var validated = true;
oldCard.content.body.forEach((item, i, body) => {
if (item.type === "Input.Text" || item.type === "Input.ChoiceSet") {
// preserve the user input
const newValue = recognizedValue.value[item.id];
item.value = newValue;
// some rudimentary input validation:
// assumes there is a corresponding text field just
// prior to the input field (input fields
// can't change their color)
if (newValue == '') {
body[i - 1].color = 'Attention';
body[i - 1].weight = 'Bolder';
validated = false;
} else {
delete body[i - 1].color;
delete body[i - 1].weight;
}
}
});
if( validated ) {
// remove the submit and cancel actions (not required, debatable)
delete oldCard.content.actions;
}
// update the card
const activity = prompt.context.activity;
activity.attachments = [oldCard];
activity.id = replyToId;
await prompt.context.updateActivity(activity);
if (validated) {
// this is to make input available in next waterfall step
prompt.recognized.value = recognizedValue.value;
return true;
} else {
await prompt.context.sendActivity(`Please check the form. Some values are missing`);
}
} else {
await prompt.context.sendActivity(`Please fill out form and press *"submit"* button or type *"cancel"* to stop.`);
}
}
return false;
}));

how to write a js script to make data import from a form error free

I have implemented a HTML webpage which has a form, now I want to add a script to it to load (import) form input given by user and do check if all of it is white spaces and if it is then give error message otherwise proceed. I want to achieve this using Javascript. I could not find the method to do so, I tried disabling the button until length of string is not equal to number of whitespaces, but that doesn't seems efficient.

This worked for me
document.addEventListener('DOMContentLoaded', () => {
// by default submit button is disabled
document.querySelector('#submit').disabled = true;
// Enable button only if there is required text in the input field
document.querySelector('#id1').onkeyup = () => {
var my_string = document.querySelector('#id1').value;
var spaceCount = (my_string.split(" ").length - 1);
if (document.querySelector('#id1').value.length != spaceCount)
document.querySelector('#submit').disabled = false;
else
document.querySelector('#submit').disabled = true;
};
});

You can use HTML5 validation See Link for more info
You can add attributes like required to your html. This also allows you to set custom error messages if the input is not valid.
In JS, you can check if($form.valid)
You can use jQuery to disable the submit button until its valid also.

Disable input typing

I'm using bootstrap Tokenfield library. I have a case in my project saying that I can edit tokens by clicking, but not typing, I have special form for adding new pills.
Is there a way to disable typing in input form, but still have an access to removing and adding pills by clicking?

You can set showAutocompleteOnFocus for mouse focus so there is not any need to use keyboard for add token or remove token, example code :-
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
});
$("#tokenfield").keydown( function(key) {
return false;
});

I had a similar requirement in a project I'm working on, all the tokens are defined using a form, our requirement dictate that the user could remove a token, but not edit or add new tokens in the input, only using the provided form. My "solution" was a bit hacky: bootstrap-tokenfield adds a new input in the DOM for the user to type text that is ultimately transformed into tokens, you can disable this input and effectively prevent the user for typing new tokens.
By default the new token receive an id with the format id-tokenfield where id is the id of the original input. If no id es provided on the original input then a random number is used instead.
So disabling this input:
$('#search-tokenfield').prop('disabled', 'disabled');
Prevents the user from creating new tokens, while keeping the chance to edit/delete tokens. In my case search is the id of the original input.

You can disable the input with id "tokenfield-tokenfield" after the token is created, and enable it back when it is removed.
$('#tokenfield').on('tokenfield:createdtoken', function (e) {
$('#tokenfield-tokenfield').prop('disabled', true);
});
$('#tokenfield').on('tokenfield:removedtoken', function (e) {
$('#tokenfield-tokenfield').prop('disabled', false);
});