Whenever I click on a field that allows me to choose a folder from an electron dialog, the dialog opens up and I am able to select the desired folder. However, after clicking okay, even though the folder path is saved in my model, it does not immediately show up in the input field. The path only appears when I click outside the field causing it to lose focus. How can I fix this behavior?
The template includes:
<input type="text" class="form-control" (click)="onClickPath($event)" [(ngModel)]="currentConfiguration.workspacePath" id="workspace-path" name="workspace-name" aria-label="workspace" aria-describedby="workspace-lable">
CurrentConfiguration.ts
export class CurrentConfiguration {
workspacePath: string;
}
configuation.component.ts
currentConfiguration: CurrentConfiguration = {
workspacePath: ""
};
//onClickedPath event:
onClickPath(event) {
console.log("clicked: ", event.target.id);
// open the dialog to select the directory
const dir = this.electronService.remote.dialog.showOpenDialog({
properties: ["openDirectory"],
title: event.target.id.split('-').join(" ")
}, (folderPath) => {
console.log(folderPath);
if (folderPath[0] == undefined) {
this.electronService.remote.dialog.showMessageBox({
type: "error",
buttons: ["ok"],
title: "Error",
message: "Please select the folder"
});
}
else{
// set the correct directoryPath.
this.currentConfiguration[event.target.id.split('-')[0] + 'Path'] = folderPath[0];
}
});
}